Hi, so using tooltips is kinda sketchy... I mean it depends on different stuff.

For example, if you trying to use the bootstrap variety of a tooltip it has some limitations like the type of component (button or link), the version of bootstrap, or if you are trying to add emphasis tag (html) to the tooltip:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" 
        data-html="true" 
        title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
   My Tooltip with HTML
</button>

In addition, the canvas tag has a class attribute but that is a whole other "situation" that depends on if you use css or bootstrap. To add more confusion, the canvas tag also has a style attribute that will allow you to add css directly to the tag but this can get out of hand quickly.

I would need to know more about what specifically you want to see to write the code but I will post a snippet on my gist too:

<!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>

My Gist : Canvas and Tooltip

Kee

Keeyana Jones

About

Available for

Keeyana Jones's blogs

Search Hashnode

Keeyana Jones

About

Available for

Keeyana Jones's blogs