title: Dynamic tooltip
body: <p>I am trying to develop a tooltip using dynamically populated string appended to my html file. I manage to print out the string with an alert box but it does not seem to show up when I am trying to use it as tooltip even though the string is appended to the html file but not showing. Find my code below
  hmtl:</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>function handler(ev){
   var counter = 0;
   var target = $(ev.target);
   var id= target.attr('id');
   function check(ev){
          var moteJson = [{"mote_id":101, "location": "qwert", "platform":"x1"}, {"mote_id":102, "location": "qwert", "platform":"x2"}, {"mote_id":103, "location": "qwert", "platform":"x3"}]; 
    if (counter&lt;1){
     var target = $(ev.target);
     var id= target.attr('id');
     if (target.is(".button")) {
      for (i=0; i&lt;moteJson.length; i++){
       if (moteJson[i].mote_id == id){
        var display = "&lt;div class = 'info'&gt;&lt;p&gt;Mote_id:  " +moteJson[i].mote_id + "\nLocation:  " + moteJson[i].location + "\nPlatform:  " + moteJson[i].platform + "&lt;/p&gt;&lt;/div&gt;";
        $("#"+id ).html(display);
        
       }  
      }
     }
    }
   counter++;
   }
    $(".button").mouseleave(check);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.button.info{
   visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 1s;
  }
  
  .button.info::after {
   content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
  }
  
  .button:hover .info {
   visibility: visible;
      opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#GFDisplay"&gt;&lt;input type="button" value="104" name="104" id="104" class="button" onmouseover="handler(this)" style="position: absolute; left: 40px; top: 40px; background-color: green;"&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>