使用Focus＆Hover显示工具提示提示

Question

我们正在利用tooltipster插件在信息图标上显示工具提示。这适用于悬停。但是我们也需要显示是否有人也选择了信息图标。

我似乎无法找到任何如何启用悬停和焦点弹出的示例。

这是在这个项目中已经存在的内容：

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'); 
       }); 
      } 
     }); 
    } 

Answer 1

您可以使用Tooltipster的表演方法，像这样：

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

Demo

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

Answer 2

$('.tooltip').tooltipster({ 
      theme: '.tooltipster-shadow', 
      trigger: 'custom', 
      maxWidth: 220, 
      interactive: true, 
      functionReady: function() { 
       $('html').click(function() { 
        $.fn.tooltipster('hide'); 
       }); 
      }.on('focus, hover', function() { 
       $(this).tooltipster('show'); 
      }).on('focusout, mouseout', function() { 
       $(this).tooltipster('hide'); 
      }) 
     });