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的show方法：

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

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

显示具有焦点和放大器的Tooltipster提示;徘徊

3 个答案: