Creating a tooltip over a table cell?
I have created a HTML table which has a function written in javascript that takes the valu开发者_Go百科e of the cursors position within a large table cell and then prints the value into a cell.
How would i go about printing the value in a tooltip instead of a table cell?
The simplest thing to do is to set the "title" attribute of some element.
element.title = "Something to show in a tooltip";
There are fancy Javascript tools to make fancy tooltips. You don't say where you want the tooltip, so it's not 100% clear what you're trying to accomplish.
you can go showing the cell content in a tooltip by something like this
jQuery.fn.applyTooltip = function(options) {
var settings = $.extend({}, options);
return this.each(function() {
var ReqElemPosition = $(this).offset();
$(this).hover(function() {
$('body').append('<div class="tooltip"></div>');
tooltip = $('.tooltip');
tooltip.empty().append($(this).text());
tooltip.fadeIn('fast').css({
top: ReqElemPosition.top + tooltip.height() * 2 - $('body').offset().top,
left: ReqElemPosition.left - ($('body').offset().left - $(this).offset().left)
});
}, function() {
tooltip.fadeOut('fast', function() {
$(this).remove();
});
});
});
};
$(document).ready(function() {
$('td').applyTooltip();
});
精彩评论