keeyanajones/Canvas and Tooltip

## Canvas and Tooltip
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Canavas and Tooltip</title>
    <!-- Latest compiled and minified CSS
         Bootstrap 4.3.1 -->
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
  </head>

  <body>
    <div class="wrapper">

<style>
body {
  padding-top: 50px;
   overflow: hidden;
}
.starter-template {
  padding: 5px 5px;
  text-align: center;
}
</style>

    <div class="container">
      <div class="starter-template">
        <p class="lead">Canvas</p>

        <!-- Just an example see more at https://getbootstrap.com/docs/4.3/components/tooltips/ -->
        <a href="#" data-toggle="tooltip" title="Some tooltip text!">
        <canvas id="myCanvas" height="150" width="150"
                style="border-style:solid;border:1px 1px 1px 1px;">

<script>
        // canvas
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        function Circle(x,y,dx,dy,radius){
          this.x = x;
          this.y = y;
          this.dx = dx;
          this.dy = dy;
          this.radius = radius;
          this.draw = function(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.radius,0,2 * Math.PI, false);
            ctx.strokeStyle = "#000000";
            ctx.stroke();
            ctx.fillStyle = "#FF0000";
            ctx.fill();
          };
          this.update = function(){
            if (this.x + this.radius > 150 || this.x - this.radius < 0) {
              this.dx = -this.dx;
            }
            if (this.y + this.radius > 150 || this.y - this.radius < 0) {
              this.dy = -this.dy;
            }
            this.x += this.dx;
            this.y += this.dy;
            this.draw();
          };
        }
        var circleArray  = [];
        for(var i =0; i < 25; i++){
          var radius = 5;
          var x = Math.random() * (150 - radius * 2) + radius;
          var y = Math.random() * (150 - radius * 2) + radius;
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Canvas and Tooltip</title>
    <!-- Latest compiled and minified CSS
         Bootstrap 4.3.1 -->
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
  </head>

  <body>
    <div class="wrapper">

    <style>
    body {
      padding-top: 50px;
       overflow: hidden;
    }
    .starter-template {
      padding: 5px 5px;
      text-align: center;
    }
    </style>

        <div class="container">
          <div class="starter-template">
            <p class="lead">Canvas</p>

            <!-- Just an example see more at
                 https://getbootstrap.com/docs/4.3/components/tooltips/ -->
            <a href="#" data-toggle="tooltip" title="Some tooltip text!">
                <canvas id="myCanvas" height="150" width="150"
                    style="border-style:solid;border:1px 1px 1px 1px;">

                    <script>
                // canvas
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");

                function Circle(x,y,dx,dy,radius){
                  this.x = x;
                  this.y = y;
                  this.dx = dx;
                  this.dy = dy;
                  this.radius = radius;
                  this.draw = function(){
                    ctx.beginPath();
                    ctx.arc(this.x,this.y,this.radius,0,2 * Math.PI, false);
                    ctx.strokeStyle = "#000000";
                    ctx.stroke();
                    ctx.fillStyle = "#FF0000";
                    ctx.fill();
                  };

                  this.update = function(){
                    if (this.x + this.radius > 150 || this.x - this.radius < 0) {
                      this.dx = -this.dx;
                    }
                    if (this.y + this.radius > 150 || this.y - this.radius < 0) {
                      this.dy = -this.dy;
                    }
                    this.x += this.dx;
                    this.y += this.dy;
                    this.draw();
                  };
                }

                var circleArray  = [];

                for(var i =0; i < 25; i++){
                  var radius = 5;
                  var x = Math.random() * (150 - radius * 2) + radius;
                  var y = Math.random() * (150 - radius * 2) + radius;
                  var dx = (Math.random() - 0.5);
                  var dy = (Math.random() - 0.5);
                  circleArray.push(new Circle(x, y, dy, dx, radius));
                }

                function animate(){
                  requestAnimationFrame(animate);
                  ctx.clearRect(0, 0, 150, 150);

                  for(var i = 0; i < circleArray.length; i++){
                    circleArray[i].update();
                  }
                  circle.update();
                }
                animate();
                </script>

                </canvas>
            </a>

            <!-- Generated markup by the plugin -->
            <div class="tooltip bs-tooltip-top" role="tooltip">
              <div class="arrow"></div>
              <div class="tooltip-inner">
                Some tooltip text!
              </div>
            </div>

          </div>
        </div>
        <!-- /.container -->

    <!-- jQuery library -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<title>Canavas and Tooltip</title>
	<!-- Latest compiled and minified CSS
	Bootstrap 4.3.1 -->
	<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	crossorigin="anonymous">
	</head>

	<body>
	<div class="wrapper">

	<style>
	body {
	padding-top: 50px;
	overflow: hidden;
	}
	.starter-template {
	padding: 5px 5px;
	text-align: center;
	}
	</style>

	<div class="container">
	<div class="starter-template">
	<p class="lead">Canvas</p>

	<!-- Just an example see more at https://getbootstrap.com/docs/4.3/components/tooltips/ -->
	<a href="#" data-toggle="tooltip" title="Some tooltip text!">
	<canvas id="myCanvas" height="150" width="150"
	style="border-style:solid;border:1px 1px 1px 1px;">

	<script>
	// canvas
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	function Circle(x,y,dx,dy,radius){
	this.x = x;
	this.y = y;
	this.dx = dx;
	this.dy = dy;
	this.radius = radius;
	this.draw = function(){
	ctx.beginPath();
	ctx.arc(this.x,this.y,this.radius,0,2 * Math.PI, false);
	ctx.strokeStyle = "#000000";
	ctx.stroke();
	ctx.fillStyle = "#FF0000";
	ctx.fill();
	};
	this.update = function(){
	if (this.x + this.radius > 150 \|\| this.x - this.radius < 0) {
	this.dx = -this.dx;
	}
	if (this.y + this.radius > 150 \|\| this.y - this.radius < 0) {
	this.dy = -this.dy;
	}
	this.x += this.dx;
	this.y += this.dy;
	this.draw();
	};
	}
	var circleArray = [];
	for(var i =0; i < 25; i++){
	var radius = 5;
	var x = Math.random() * (150 - radius * 2) + radius;
	var y = Math.random() * (150 - radius * 2) + radius;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<title>Canvas and Tooltip</title>
	<!-- Latest compiled and minified CSS
	Bootstrap 4.3.1 -->
	<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	crossorigin="anonymous">
	</head>

	<body>
	<div class="wrapper">

	<style>
	body {
	padding-top: 50px;
	overflow: hidden;
	}
	.starter-template {
	padding: 5px 5px;
	text-align: center;
	}
	</style>

	<div class="container">
	<div class="starter-template">
	<p class="lead">Canvas</p>

	<!-- Just an example see more at
	https://getbootstrap.com/docs/4.3/components/tooltips/ -->
	<a href="#" data-toggle="tooltip" title="Some tooltip text!">
	<canvas id="myCanvas" height="150" width="150"
	style="border-style:solid;border:1px 1px 1px 1px;">

	<script>
	// canvas
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");

	function Circle(x,y,dx,dy,radius){
	this.x = x;
	this.y = y;
	this.dx = dx;
	this.dy = dy;
	this.radius = radius;
	this.draw = function(){
	ctx.beginPath();
	ctx.arc(this.x,this.y,this.radius,0,2 * Math.PI, false);
	ctx.strokeStyle = "#000000";
	ctx.stroke();
	ctx.fillStyle = "#FF0000";
	ctx.fill();
	};

	this.update = function(){
	if (this.x + this.radius > 150 \|\| this.x - this.radius < 0) {
	this.dx = -this.dx;
	}
	if (this.y + this.radius > 150 \|\| this.y - this.radius < 0) {
	this.dy = -this.dy;
	}
	this.x += this.dx;
	this.y += this.dy;
	this.draw();
	};
	}

	var circleArray = [];

	for(var i =0; i < 25; i++){
	var radius = 5;
	var x = Math.random() * (150 - radius * 2) + radius;
	var y = Math.random() * (150 - radius * 2) + radius;
	var dx = (Math.random() - 0.5);
	var dy = (Math.random() - 0.5);
	circleArray.push(new Circle(x, y, dy, dx, radius));
	}

	function animate(){
	requestAnimationFrame(animate);
	ctx.clearRect(0, 0, 150, 150);

	for(var i = 0; i < circleArray.length; i++){
	circleArray[i].update();
	}
	circle.update();
	}
	animate();
	</script>

	</canvas>
	</a>

	<!-- Generated markup by the plugin -->
	<div class="tooltip bs-tooltip-top" role="tooltip">
	<div class="arrow"></div>
	<div class="tooltip-inner">
	Some tooltip text!
	</div>
	</div>

	</div>
	</div>
	<!-- /.container -->

	<!-- jQuery library -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
	crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
	crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
	crossorigin="anonymous"></script>
	</body>
	</html>