Search code examples
javascriptjquerytooltipster

Showing Tooltipster Tip With Both Focus & Hover

We are utilizing the tooltipster plugin to display a tooltip over an info icon. This works fine on hover. But we also need to have it show if someone tabs to the info icon too.

I can't seem to find any examples of how to enable the popup on both hover AND focus.

This is what existed in this project already:

HTML:

<a href="#"><span class="tooltip">Some handy tooltip text...</span></a>

Javascript:

if ($('.tooltip').length) {
        $('.tooltip').tooltipster({
            theme: '.tooltipster-shadow',
            maxWidth: 220,
            interactive: true,
            functionReady: function () {
                $('html').click(function () {
                    $.fn.tooltipster('hide');
                });
            }
        });
    }
Solution

  • You can use Tooltipster's show method like so:

    $('.tooltip').tooltipster().focus(function() {
    $(this).tooltipster('show');
});

    Demo

    http://iamceege.github.io/tooltipster/#advanced