title: On Hover, tooltip display an image?
body: <p>What I hope to accomplish is write a small jQuery script that will allow me to take the content of a block and trigger a popup whenever someone places their mouse over it. In essense, it's going to be a tooltip with an image in it.</p>
  
  <p>All the tutorials that I have found REPLACE pictures on mouseover, or are tooltips that contain only text. Here is the code:</p>
  
  <pre><code>$(document).ready(function() {
      $('div#block-block-14.block').hover(
          function()  {
              this.tip = this.title;
              $(this).append(
              '&lt;div class="toolTipWrapper"&gt;'
              + '&lt;div class="toolTipContent"&gt;&lt;/div&gt;'
              );
              this.title = "";
              this.width = $(this).width();
              $(this).find('.toolTipWrapper').css({left:this.width-22})
              $('.toolTipWrapper').fadeIn(300);
          },
              function()  {
                  $('.toolTipWrapper').fadeOut(100);
                  $(this).children().remove();
                      this.title = this.tip;
              }
              );
  });
  </code></pre>
  
  <p>And here is the CSS code:</p>
  
  <pre><code>div#block-block-14.block{ background:url(../images/QuadChartDropShadow.png);}
  .toolTipWrapper{width:175px;position:absolute;top:20px;display:none;color:#FFF;font-weight:bold;font-size:9pt}
  .toolTipContent{padding: 8 px 15px; background:url(../images/QuadCharDropShadow.png) no-repeat top;}
  </code></pre>