Getting custom tooltips with JQuery

Question

Hello,

I'm looking for a JQuery code sample or library for displaying tooltips when the cursor hovers over an element. Specifically, what I want to do is display my own <div> element on hover, not an automatically-constructed or loaded-from-the-host-element tooltip. I've looked at a couple JQuery tooltip plugins and they all seem to be unable to do this, but are very complex in other ways. This seems like something that should be only a couple of lines of JS/JQuery to do, yet I also haven't been able to find any working tutorials.

An ideal solution would also deal with tooltips near borders, have a 'sticky tooltip' option, have the option to load the HTML to be displayed as the tooltip using AJAX (as opposed to inline in the HTML/JS), and deal well with large numbers of tooltips (only showing one at a time of course).

Answer 1

Well, I can't offer you an entire solution but getting a div to appear as a tooltip is pretty simple:

(function($){

    var $div = $('<div/>').css({
        position: 'absolute',
        background: 'white',
        border: '1px solid black',
        padding: '10px',
        zIndex: 999,
        display: 'none'
    }).appendTo('body');

    $('a.tooltip')
        .mousemove(function(e){
            $div.css({
                top: e.pageY + 10 + 'px',
                left: e.pageX + 10 + 'px'
            });
        })
        .hover(function(){
            $div.show().html('Text to display...');
        }, function(){
            $div.hide();
        });

})(jQuery);

An example -> http://jsbin.com/emoso

Answer 2

Hi, Please find here a full solution: http://www.jcargoo.org/2008/11/easy-tooltip-and-image-preview-using.html

Answer 3

The jquery tooltip plugin seems to be able to do all that you want. You can use the bodyHandler: function() to define what the tooltip should be. And it can be a div that you have defined (which can even be filled using ajax when it is about to be displayed) See the second example here . I have no idea about the sticky tooltip, but the other features are all provided here.

Answer 4

I really love jTip that allows you to work nicely even in ajax mode, with the asynchronous load of an external resource for the content.

Answer 5

Okay, I finally had some time to revisit this and here's what I settled on. I'm quite happy with it overall; the only problem I have noticed is if you have an element with a tooltip in the lower right corner of the window, such that the tooltip doesn't have room to be displayed between the element and the window border, it will appear on top of the element and start to flicker as focus flips between the element and the popup. Tips on solving this, or general comments on my JS style (I've written very little JS code before) are welcomed.

The JavaScript function:

function showInfoBox(parent_index, parent) {

var parent_id = $(this).attr('id');
var infobox_id = parent_id+"_ib";
$("body").append("<div class='infobox' id='"+infobox_id+"'><p>This is an infobox for "+parent_id+"</p></div>"); //customize here
var infobox = $("#"+infobox_id);

$(this).mousemove(function(e){
 var pad = 10;
 var x = Math.min(e.pageX + pad, $(window).width() - infobox.width() - pad);
 var y = Math.min(e.pageY + pad, $(window).height() + $(window).scrollTop() - infobox.height() - pad);
 infobox.css({
  top:  y + 'px',
  left: x + 'px'
 });
})
    .hover(function(){
     infobox.show();
    }, function(){
     infobox.hide();
    });

};

The JQuery to call on document load:

$(".SELECTOR-FOR-STUFF-TO-GET-INFOBOXES").each(showInfoBox);

The CSS required:

.infobox { display:none; position:absolute; z-index:999; /* more CSS if you like */}

Answer 6

Simple Tooltip in Jquery waqzah.wordpress.com

Answer 7

Hey kquinn,

Have you tried Likno Web Tooltips Builder?

Take a look at: http://www.likno.com/jquery-tooltips/index.php

Brad