[ACCEPTED]-Getting custom tooltips with JQuery-tooltip

Accepted answer
Score: 11

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


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

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


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

Score: 0

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

Score: 0

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

Score: 0

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

The 2 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);

    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);
        top:  y + 'px',
        left: x + 'px'
    }, function(){


The JQuery to call 1 on document load:


The CSS required:

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

More Related questions