21

有没有办法手动打开关闭 jquery ui 工具提示？我只是希望它对打开/关闭的点击事件做出反应。您可以取消绑定所有鼠标事件，它会在调用 .tooltip('open') 时重新绑定它们，即使这不应该初始化或设置事件 imo，因为如果您尝试在不初始化的情况下运行 .tooltip('open')，它会抱怨大声说没有被初始化。

4

5 回答 5

14

jltwoo，我可以建议使用两个不同的布尔开关来启用自动打开和自动关闭吗？通过此更改，您的代码将如下所示：

(function( $ ) {
  $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
        autoShow: true,
        autoHide: true
    },

    _create: function() {
      this._super();
      if(!this.options.autoShow){
        this._off(this.element, "mouseover focusin");
      }
    },

    _open: function( event, target, content ) {
      this._superApply(arguments);

      if(!this.options.autoHide){
        this._off(target, "mouseleave focusout");
      }
    }
  });

}( jQuery ) );

这样，将工具提示初始化为：

$(someDOM).tooltipX({ autoHide:false });

当鼠标悬停在元素上时它会自行显示，但您必须手动关闭它。

如果您想手动控制打开和关闭操作，您可以简单地使用：

$(someDOM).tooltipX({ autoShow:false, autoHide:false });
于 2013-10-24T15:35:39.570 回答
11

如果您只想取消绑定事件并且不想制作自己的自定义工具提示。

$("#some-id").tooltip(tooltip_settings)
             .on('mouseout focusout', function(event) {
                  event.stopImmediatePropagation();
             });

$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");

mouseout通过移动鼠标光标阻止工具顶部消失

focusout阻止工具顶部通过键盘导航消失

于 2013-11-11T01:48:33.930 回答
7

工具提示有一个禁用选项。好吧，我使用了它，这是代码：

$('a').tooltip({
    disabled: true    
}).click(function(){    
    if($(this).tooltip('option', 'disabled'))
        $(this).tooltip('option', {disabled: false}).tooltip('open');
    else
        $(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
    $(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
    $(this).tooltip('option', {disabled: true}).tooltip('close');
});
于 2012-10-25T04:04:45.067 回答
5

与我的其他评论相关，我查看了原始代码并通过扩展小部件并添加版本 JQuery-UI v1.10.3 的 autoHide 选项来实现手动打开/关闭。基本上我只是删除了在 _create 和内部 _open 调用中添加的鼠标侦听器。

编辑：按照@MscG 的建议，将 autoHide 和 autoShow 分隔为两个单独的标志

在这里演示：http: //jsfiddle.net/BfSz3/

(function( $ ) {
  $.widget( "custom.tooltipX", $.ui.tooltip, {
    options: {
      autoHide:true,
      autoShow: true
    },

    _create: function() {
      this._super();
      if(!this.options.autoShow){
        this._off(this.element, "mouseover focusin");
      }
    },

    _open: function( event, target, content ) {
      this._superApply(arguments);

      if(!this.options.autoHide){
        this._off(target, "mouseleave focusout");
      }
    }
  });

}( jQuery ) );

现在，当您初始化时，您可以通过设置 autoHide 将工具提示设置为手动显示或隐藏：false：

 $(someDOM).tooltipX({ autoHide:false });

并根据其他地方的需要直接在您的代码中执行标准的打开/关闭调用

 $(someDOM).tooltipX("open"); // displays tooltip
 $(someDOM).tooltipX("close"); // closes tooltip

一个简单的修补程序，直到我有时间做正式的拉取请求，这将不得不做。

于 2013-09-22T05:44:49.847 回答
0

其他 SO 问题的一些汇编。

示例在单击时 显示工具提示hint，并在单击时隐藏工具提示

$(document).on('click', '.hint', function(){ //init new tooltip on click
   $(this).tooltip({
      position: { my: 'left+15 center', at: 'center right' },
      show: false,
      hide: false
   }).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
   if(!$(event.target).hasClass('hint'))
     $(".hint").each(function(){
        var $element = $(this);
        if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
           $element.tooltip('destroy');
        }
     })
});

$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip 
    event.stopImmediatePropagation();
});
于 2018-04-05T21:53:44.200 回答