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');
});
}
});
}
You can use Tooltipster's show method like so:
$('.tooltip').tooltipster().focus(function() {
$(this).tooltipster('show');
});