title: How to show tooltip On click event Using JavaScript
body: <p>How can I show a tooltip by clicking on a button with   JavaScript ?</p>
  <p>Here is my code:</p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;tooltip&quot;&gt;Hover over me
  &lt;div class=&quot;tooltiptext&quot;&gt;
  &lt;button&gt;click me&lt;/button&gt;
    &lt;span &gt;Tooltip text
    
    &lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  </code></pre>
  <p>The tooltip is showing while doing hover. But I want to show tooltip while using on click event using only JavaScript how will I do that. Please help me.</p>