Creating a tooltip over a table cell?

Question

I have created a HTML table which has a function written in javascript that takes the value 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?

Answer 1

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.

Answer 2

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();
});