jQueryUI - Tooltip with links

August 31, 2017

jQuery UI Tooltip is a jQuery UI plugin that allows you to use a custom tooltip instead of the standard title attribute. It can contain various kind of data, but is not possibile to click links inside the displyed tooltip data.

The reason why is that the cursor enter the tooltip for clicking the link, and the mouseout event of the triggering element hide the tooltip itself.

It’s a bit tricky I know, but it’s possibile to workaround this issue using the following code.

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
            },    
            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
        }
    });
});

Currently we can’t expect that the jQuery UI team add this feature.

You can play with this code in the following jsFiddle: