Javascript "Tooltip" with continuously changing content

Question

I have a canvas element and I want to show a tooltip following the mouse pointer with the text in the tooltip continuously changing depending on what is currently under the pointer.

I have found qtip but it looks like it is geared more towards a declarative approach where you don't have the text in your tooltip continuously changing. Also it looks a bit of an overkill for a simple text tooltip. I may be wrong though.

So how do I show a tooltip (with the ability to continuously change its contents and coordinates) with javascript (any libraries permitted)?

megakorre · Accepted Answer · 2011-05-21 14:01:06Z

2

theres a plugin http://koteako.com/hoverbox/

folowes your mouse youst change its content on mousemove

answered May 21, 2011 at 14:01

megakorre

2,22316 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

axk Over a year ago

This sets the text on mouseover and you cannot change it continuously.

axk · Accepted Answer · 2011-05-21 19:41:28Z

I ended up modifying the hoverbox plugin slightly to allow for the text to be updated while mouseover'ing the element so that I can set the title attribute in my other mouseover handler to update the hoverbox:

/*
 * jQuery Hoverbox 1.0
 * http://koteako.com/hoverbox/
 *
 * Copyright (c) 2009 Eugeniy Kalinin
 * Dual licensed under the MIT and GPL licenses.
 * http://koteako.com/hoverbox/license/
 */
/*
*  Slightly modfied to allow for updating the text
*  of the hoverbox while mouseover the element
*/
jQuery.fn.hoverbox = function(options) {
    var settings = jQuery.extend({
        id: 'tooltip',
        top: 0,
        left: 15
    }, options);

    var handle;
    var that;

    function tooltip(event) {
        if ( ! handle) {
            // Create an empty div to hold the tooltip
            handle = $('<div style="position:absolute;background:white;border:black;" id="'+settings.id+'"></div>').appendTo(document.body).hide();
        }

        if (event) {
            //update the text
            that.t = that.title;
            that.title = '';
            handle.html(that.t);

            // Make the tooltip follow a cursor
            handle.css({
                top: (event.pageY - settings.top) + "px",
                left: (event.pageX + settings.left) + "px"
            });
        }
        return handle;
    }

    this.each(function() {
        $(this).hover(
            function(e) {
                that = this;
                tooltip(e).fadeIn('fast');
            },
            function() {
                if (this.t) {
                    this.title = this.t;
                    tooltip().hide();
                }
            }
        );
        $(this).mousemove(tooltip);
    });
};

Collectives™ on Stack Overflow

Javascript "Tooltip" with continuously changing content

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related