title: Show tooltip using JavaScript
body: <p>I am trying to show a tooltip by hovering the mouse on a circle inside a canvas. While the CSS is changing from hidden to visible by javaScript (saw that through chrome inspect), the tooltip is not showing up. Please help to sort this out. Thank you for your help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.getElementById('flower');
  const ctx = canvas.getContext('2d');
  
  const circle2 = new Path2D();
                          circle2.arc(100, 100, 25, 0, 2 * Math.PI);
                          ctx.fillStyle = "red";
                          ctx.fill(circle2);
                          
  canvas.addEventListener("mousemove", function(event2) {
                              if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
                                  showtext();
                              }
                          }); 
                          
  function showtext(){
      document.getElementById("tooltiptext").style.visibility = 'visible';
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body, div, canvas {
          width:  100%;
          height: 100%;
          margin: 0;
  }
      .tooltip {
          position: relative;
          display: inline-block;
          border-bottom: 1px dotted black; 
      }
      .tooltip .tooltiptextstyle {
          visibility: hidden; 
          display: block;
          width: 120px;
          background-color: black;
          color: #fff;
          text-align: center;
          padding: 5px 0;
          border-radius: 6px;
          position: absolute;
          z-index: 1;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link type="text/css" href="style.css"/&gt;
      &lt;script type="text/typescript" src="main.ts"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="design" class="design"&gt;
          &lt;canvas id="flower"&gt;
              &lt;div class="tooltip"&gt;
                  &lt;span id ="tooltiptext" class="tooltiptextstyle"&gt;blah&lt;/span&gt;
              &lt;/div&gt;
          &lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>