blocks|key|449800|text|工具提示有一个禁用选项。我用了它，下面是代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449801|$('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');
});|code-block|syntax|javascript|449802|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The tooltip have a disable option. Well i used it and here is the code:

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

blocks|key|231920|text|jltwoo，我可以建议使用两个不同的布尔开关来启用自动打开和自动关闭吗？进行此更改后，您的代码将如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|231921|(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+)+);|code-block|syntax|javascript|231922|通过这种方式，将工具提示初始化为：|231923|$(someDOM).tooltipX({+autoHide:false+});|231924|当鼠标在元素上时，它会自动显示，但您必须手动关闭它。|231925|如果您想手动控制打开和关闭操作，您可以简单地使用：|231926|$(someDOM).tooltipX({+autoShow:false,+autoHide:false+});|231927|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:

<pre><code>(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 ) );
</code></pre>

In this way, initializing the tooltip as:

<pre><code>$(someDOM).tooltipX({ autoHide:false });
</code></pre>

it shows by itself when the mouse is over the element but you have to manually close it.

If you want to manually control both open and close actions, you can simply use:

<pre><code>$(someDOM).tooltipX({ autoShow:false, autoHide:false });
</code></pre>

blocks|key|231957|text|一些来自其他SO问题的汇编。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|231958|Example在单击hint时显示工具提示，并在单击时隐藏工具提示|offset|length|style|CODE|231959|$(document).on('click',+'.hint',+function(){+//init+new+tooltip+on+click
+++$(this).tooltip({
++++++position:+{+my:+'left%2B15+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();
});|code-block|syntax|javascript|231960|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/9mff4scL/4/^0|0|A|4|0|7|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Some compilation from other SO questions. 

<a href="https://jsfiddle.net/9mff4scL/4/" rel="nofollow noreferrer">Example</a>
Show tooltip on <code>hint</code> click, and hide tooltip on elsevere click

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

is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.

jquery ui tooltip manual open /close

jQuery

有没有办法手动打开关闭jquery ui工具提示？我只想让它对打开/关闭的单击事件做出反应。你可以解除所有鼠标事件的绑定，当调用.tooltip('open')时，它会重新绑定它们，即使这不应该初始化或设置事件，因为如果你不初始化就运行.tooltip('open')，它会大声抱怨没有初始化。

问jquery ui工具提示手动打开/close
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery ui工具提示手动打开/closeEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery ui工具提示手动打开/close
EN