显示带有焦点和悬停的 Tooltipster 提示答案

【问题标题】：Showing Tooltipster Tip With Both Focus & Hover显示带有焦点和悬停的 Tooltipster 提示
【发布时间】：2015-04-25 09:57:07
【问题描述】：

我们正在利用 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');
                });
            }
        });
    }

【问题讨论】：

不需要if 块。 jQuery 为您处理。
删除if 块并不能解决问题。 :-)
并不建议这样做。只是试图为您节省许多代码行。否则我会把它作为一个答案。 ;-)
对于较新版本的 Tooltipster，请查看此处的文档calebjacob.github.io/tooltipster/#triggers。您可以有多个触发器用于打开或关闭，即 mouseenter 和 tap。

标签： javascript jquery tooltipster

【解决方案1】：

你可以像这样使用 Tooltipster 的 show 方法：

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

Demo

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

【讨论】：

添加它会导致工具提示根本不出现（悬停或单击时）。

【解决方案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' );
            })
        });

【讨论】：

【解决方案3】：

我想你正在寻找那个：

$('.tooltip_hover_n_click').tooltipster({
  delay: 100,
  trigger: 'custom' // disable all by default
}).mouseover(function(){ // show on hover
  $(this).tooltipster('show');
}).blur(function(){ // on click it'll focuses, and will hide only on blur
  $(this).tooltipster('hide');
}).mouseout(function(){ // if user doesnt click, will hide on mouseout
  if(document.activeElement !== this){
    $(this).tooltipster('hide');
  }
});

【讨论】：