[ACCEPTED]-Getting custom tooltips with JQuery-tooltip
Well, I can't offer you an entire solution 2 but getting a div to appear as a tooltip 1 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
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.
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.
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);
$(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 1 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 */}
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.