title: Show table in a tooltip with jQuery
body: <p>I'm trying to show HTML code inside a tooltip (div, table,...), but it doesn't show up and it doesn't show any errors. 
  If I use the <code>&lt;span&gt;</code> tag with some text inside it, it works correctly. But I need to insert more HTML code inside it. How can I fix it?
  Only works with <code>&lt;span&gt;</code> tag, and I don't know how to solve this problem, any help? Why is this happening?</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>$(document).ready(function() {
   //Tooltips
   $(".tip_trigger").hover(function(){
    tip = $(this).find('.tip');
    tip.show(); //Show tooltip
   }, function() {
    tip.hide(); //Hide tooltip    
   }).mousemove(function(e) {
    var mousex = e.pageX + 20; //Get X coodrinates
    var mousey = e.pageY + 20; //Get Y coordinates
    var tipWidth = tip.width(); //Find width of tooltip
    var tipHeight = tip.height(); //Find height of tooltip
    
    //Distance of element from the right edge of viewport
    var tipVisX = $(window).width() - (mousex + tipWidth);
    //Distance of element from the bottom of viewport
    var tipVisY = $(window).height() - (mousey + tipHeight);
      
    if ( tipVisX &lt; 20 ) { //If tooltip exceeds the X coordinate of viewport
     mousex = e.pageX - tipWidth - 20;
    } if ( tipVisY &lt; 20 ) { //If tooltip exceeds the Y coordinate of viewport
     mousey = e.pageY - tipHeight - 20;
    } 
    tip.css({  top: mousey, left: mousex });
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   margin: 0; padding: 0;
   font: normal 12px Verdana, Geneva, sans-serif;
   line-height: 1.8em;
   color: #333;
  }
   
  * {
   outline: none;
  }
  img {border: none;}
  
  a {color: #d60000; text-decoration: none;}
  
  /*--Tooltip Styles--*/
  .tip {
   display: inline-block;
   color: #fff;
   background:#1d1d1d;
   display:none; /*--Hides by default--*/
   padding:10px;
   position:absolute; z-index:1000;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p style="text-align:left;"&gt;My First
    &lt;a href="#" class="tip_trigger"&gt;Link 
     &lt;span class="tip"&gt;
      Some text. Works correctly!
     &lt;/span&gt;
    &lt;/a&gt;
  &lt;/p&gt;
  &lt;p style="text-align:left;"&gt;My Second
    &lt;a href="#" class="tip_trigger"&gt;Link 
     &lt;div class="tip"&gt;
      &lt;table&gt;&lt;tr&gt;&lt;td&gt;More text. Doesn't work!&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
     &lt;/div&gt;
    &lt;/a&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>