【问题标题】:jQuery ToolTip disable hoverjQuery ToolTip 禁用悬停
【发布时间】:2016-02-28 19:52:17
【问题描述】:

大家好,我正在使用下面的代码作为工具提示:

/*
Tipr 2.0.1
Copyright (c) 2015 Tipue
Tipr is released under the MIT License
http://www.tipue.com/tipr
*/
(function($) {
  $.fn.tipr = function(options) {
    var set = $.extend({
      'speed': 200,
      'mode': 'bottom'
    }, options);

    return this.each(function() {
      var tipr_cont = '.tipr_container_' + set.mode;

      $(this).hover(
        function() {
          var d_m = set.mode;

          if ($(this).attr('data-mode')) {
            d_m = $(this).attr('data-mode')
            tipr_cont = '.tipr_container_' + d_m;
          }

          var out = '<div class="tipr_container_' + d_m + '"><div class="tipr_point_' + d_m + '"><div class="tipr_content">' + $(this).attr('data-tip') + '</div></div></div>';

          $(this).append(out);

          var w_t = $(tipr_cont).outerWidth();
          var w_e = $(this).width();
          var m_l = (w_e / 2) - (w_t / 2);

          $(tipr_cont).css('margin-left', m_l + 'px');
          $(this).removeAttr('title alt');
          $(tipr_cont).fadeIn(set.speed);
        },
        function() {
          $(tipr_cont).remove();
        }
      );
    });
  };
})(jQuery);

$(document).ready(function() {
     $('.tip').tipr();
});

我试图通过调用类似这样的方法来禁用悬停:

$(gbTip).off('hover');

但这似乎不起作用,因为它仍然会在将鼠标悬停在文本上时弹出。

这里是JSFIDDLE

【问题讨论】:

    标签: javascript jquery html jquery-plugins jquery-tooltip


    【解决方案1】:

    您可以禁用悬停

    $(document).ready(function() {
        gbTip = $('.tip').tipr();
        gbTip.unbind('mouseenter mouseleave');
    });
    

    编辑:

    或者,要在启用和禁用悬停效果之间切换,我们可以添加一个no-hover 类,

    $('.tip').addClass('no-hover');
    

    用css,

    .no-hover > * {
       display: none !important;
    }
    

    要再次启用悬停效果,只需删除类,

    $('.tip').removeClass('no-hover');
    

    【讨论】:

    • 好的。那时如何重新打开它?只是 gbTip.bind('mouseenter mouseleave');?
    • 如果您只需要禁用悬停效果,Unbind 将是理想的选择,但要在启用和禁用之间切换,我将使用 no-hover 类代替 $('.tip')。然后为tipr 元素添加一个css 规则display: none !important。此外,要使悬停再次起作用,只需删除 no-hover 类。
    • 嗡嗡声可以工作,但我正在使用的按钮会变成模块框,并且由于它添加了该类 *display: none" 它不再显示模块框内的内容......理想情况下我需要能够销毁工具提示,然后重新创建它。
    猜你喜欢
    • 1970-01-01
    • 2022-12-18
    • 2013-08-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多