Question

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.

All the tutorials that I have found REPLACE pictures on mouseover, or are tooltips that contain only text. Here is the code:

$(document).ready(function() {
    $('div#block-block-14.block').hover(
        function()  {
            this.tip = this.title;
            $(this).append(
            '<div class="toolTipWrapper">'
            + '<div class="toolTipContent"></div>'
            );
            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;
            }
            );
});

And here is the CSS 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;}

Answer 1

For tooltip, I will always recommend qTip2. The implementation is easy, and the best thing is the creator is supportive, every problem I reported in the Help and Support forum is always having response 🙂

To render image in the tooltip is easy, can be done in several ways

 <img id='tooltip1' style="display:none;" src="../../Content/HomePage/aboutshop.JPG" />

 $('#aboutshop').qtip({
     content: {
     text: $('#tooltip1') 
     }
 });

Or

 $('a').qtip({
       content: {
        text: '<img src="test.png" />'
        }
  });

You can check many more function here: http://craigsworks.com/projects/qtip2/docs/

Hope this help 🙂