CODEWITHSUNDEEP
javascriptjquerytooltip
kquinn
kquinn

Reputation: 10740

Getting custom tooltips with JQuery

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).

Upvotes: 4

Views: 14655

Answers (6)

zoby
zoby

Reputation: 1

Here's a great custom tooltip https://z-progrock.com/custom-tooltip-using-jquery/

Upvotes: -1

Waqas Zahoor
Waqas Zahoor

Reputation:

Simple Tooltip in Jquery waqzah.wordpress.com

Upvotes: -1

kquinn
kquinn

Reputation: 10740

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 */}

Upvotes: 0

Anand
Anand

Reputation: 7764

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.

Upvotes: 0

tanathos
tanathos

Reputation: 5606

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.

Upvotes: 1

James
James

Reputation: 111900

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

Upvotes: 11

Related Questions