jquery ui工具提示手动打开/关闭

Question

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

Answer 1

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

Answer 2

如果你想解开事件并且不想制作自己的自定义工具提示.

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

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

mouseout通过移动鼠标光标阻止tooltop消失

聚焦通过键盘导航阻止tooltop消失

Answer 3

工具提示具有禁用选项.好吧,我用它,这里是代码:

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

Answer 4

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

编辑:将@HscG建议的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

一个简单的修补程序,直到我有时间做官方拉取请求,这将是必须的.