How to add

Question

I am using jQuery UI 1.10 Tooltip. Below is my call to tooltip. I cannot find on the documentation on how to do this. I want to add a href links into the tooltip and let user be able to mouseover and click on it. Right now as soon as my mouse hover away from the tip trigger, the tooltip disappear.

    $(function () {
        $(document).tooltip({
            track: false,
            show: {
                effect: "slideDown",
                delay: 20
            },
            hide: {
                effect: "explode",
                delay: 5
            }
        });
    })

Documentation: http://api.jqueryui.com/tooltip/#option-position

Thanks,

Will

score 0 · Answer 1 · edited May 23 '17 at 12:05

jQuery UI tooltips don't support this out the box however You can add the following code which delays the hide function allowing you to move the mouse over the tooltip:

close: function (event, ui) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true).fadeIn(250);
        },    
        function () {
            $(this).fadeOut("250", function () {
                $(this).remove();
            })
        }
    );
}

This won't work with the custom explode animation you defined for hiding the tooltip though so I've had to remove that and it will just fade out:

/*hide: {
    effect: "explode",
    delay: 5
},*/

You will then need to add the following code to allow the tooltip to display HTML but please be aware that you are potentially opening your site up to an XSS Vulnerability by doing this:

content: function () {
    return $(this).prop('title');
},

See here for a fiddle

How to add

1 Answers1