CODEWITHSUNDEEP
javascriptjqueryhtml
mikey bording
mikey bording

Reputation: 1

Creating a tooltip over a table cell?

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?

Upvotes: 0

Views: 5205

Answers (2)

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11558

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

Upvotes: 0

Pointy
Pointy

Reputation: 413709

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.

Upvotes: 4

Related Questions