jQuery UI的工具提示手动打开/关闭(jquery ui tooltip manual ope

2019-07-02 13:17发布

有没有办法手动打开关闭的jQuery UI的工具提示? 我只是希望它的单击事件触发的开/关反应。 您可以取消绑定所有鼠标事件,它会重新绑定他们打电话时.tooltip(“开放”),尽管这不应该初始化或IMO设定的事件,因为如果你试图不经过初始化运行.tooltip(“开放”),它抱怨大声对未初始化。

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:

如果你只想取消绑定事件和woudn't想使自己的自定义工具提示。

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

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

鼠标移出块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一个自动隐藏选项。 基本上我只是删除_create和内部_open通话中添加鼠标监听器。

编辑:分居自动隐藏,并自动显示为两个独立的标志由@MscG的建议

演示在这里: 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 ) );

现在,当您初始化,您可以设置提示手动显示或通过设置自动隐藏隐藏:错误:

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

与其他地方一样需要在你的代码而直接执行标准的打开/关闭通话

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

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



Answer 5:

一些编译其他SO问题。

例如在显示工具提示hint点击,并在elsevere点击隐藏工具

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


文章来源: jquery ui tooltip manual open /close