CODEWITHSUNDEEP
javascriptjqueryhtml
KeizerBridge
KeizerBridge

Reputation: 2757

Interact with the tooltip in jQuery

How can I interact with the tooltip in jQuery? You know, the little pop-up appearing when you hover an <a> element or an <img>. I wanted to make that one follow my cursor when I move onto that tag. Exactly like this.

Upvotes: 0

Views: 1031

Answers (3)

Davor Zubak
Davor Zubak

Reputation: 4746

Here is simple jquery plugin for custom tooltip. jsFiddle You can specify mouseFollow: true to achieve movable tooltip that follows cursor.

JS

(function ($) {
    $.fn.tooltip = function (options) {

        var defaults = {
            background: '#fff',
            border: '1px solid #999',
            color: 'black',
            rounded: false,
            mouseFollow: false,
            textChangeOnClick: false
        },
        settings = $.extend({}, defaults, options);

        this.each(function () {

            var $this = $(this),
                title = null,
                hovering = null;

            //set class
            if (!settings.textChangeOnClick) {
                $this.addClass('_tooltip');
            }

            $(this).data('title', $this.attr('title'))
            $(this).attr('title', '');

            $this.hover(
                // mouse over 
                function (e) {

                //check change
                if ($this.attr('title') != '') {

                    if ($this.attr('title') != $this.data('title')) {

                        $this.data('title', $this.attr('title'));
                        $this.attr('title','');
                    }

                } else {

                    $this.removeAttr('title');
                }

                $this.attr('title', '');

                hovering = true;
                $('#tooltip').remove();

                //create box
                if ($this.data('title') != '') {

                    $('<div id="tooltip" />')
                        .appendTo('body')
                        .text($this.data('title'))
                        .hide()
                        .css({
                            backgroundColor: settings.background,
                            color: settings.color,
                            border: settings.border,
                            top: e.pageY + 10,
                            left: e.pageX + 20
                        })
                        .fadeIn(500);
                }

                if (settings.rounded) {
                    $('#tooltip').addClass('rounded');
                }

             },
             //mouse out
             function () {
                hovering = false;
                $('#tooltip').remove();
             });

            //text change
            if (settings.textChangeOnClick) {

            //on click
            $this.on('click', function () {

                if (hovering) {

                    //set new
                    $this.data('title',$(this).attr('title'));

                    $(this).attr('title', '');
                    $('#tooltip').text($this.data('title'));
                }
            });
        }

        //mouse follow
        if (settings.mouseFollow) {

            $this.mousemove(function (e) {
                $('#tooltip').css({
                    top: e.pageY + 10,
                    left: e.pageX + 20
                });
            });
        }
    });

    return this;
}


})(jQuery);

SET PLUGIN FOR ELEMENT

$('a').tooltip({
    mouseFollow: true
});

HTML

<a href="#" title="Hello"></a>

CSS

#tooltip
{
    border: 1px solid #BFBFBF;
    float: left;
    font-size: 11px;
    max-width: 250px;
    padding: 5px;
    position: absolute;
    color: #464646;
    z-index: 999999;
}
.rounded
{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

Upvotes: 0

Danijel
Danijel

Reputation: 867

A part for mouse tracking tooltip: Mouse tracking

I didn't not tried it but it seems nice: one more

Upvotes: 1

casraf
casraf

Reputation: 21684

You might wanna look at jQuery UI's tooltip or the QTip plugin.

Upvotes: 2

Related Questions