Jquery ui jquery ui工具提示手动打开/关闭
有没有办法手动打开或关闭jquery ui工具提示?我只想让它对打开/关闭的点击事件做出反应。您可以解除所有鼠标事件的绑定,它将在调用.tooltip(“打开”)时重新绑定它们,即使这不应该初始化或设置事件,因为如果您尝试在未初始化的情况下运行.tooltip(“打开”),它会大声抱怨没有初始化。工具提示有一个禁用选项。我使用了它,下面是代码:Jquery ui jquery ui工具提示手动打开/关闭,jquery-ui,tooltip,Jquery Ui,Tooltip,有没有办法手动打开或关闭jquery ui工具提示?我只想让它对打开/关闭的点击事件做出反应。您可以解除所有鼠标事件的绑定,它将在调用.tooltip(“打开”)时重新绑定它们,即使这不应该初始化或设置事件,因为如果您尝试在未初始化的情况下运行.tooltip(“打开”),它会大声抱怨没有初始化。工具提示有一个禁用选项。我使用了它,下面是代码: $('a').tooltip({ disabled: true }).click(function(){ if($(th
$('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');
});
与我的其他评论相关,我查看了原始代码,通过扩展小部件并在jQueryUIV1.10.3版本中添加自动隐藏选项,实现了手动打开/关闭。基本上,我只是删除了在create和open调用中添加的鼠标侦听器 编辑:按照@MscG的建议,将自动隐藏和自动显示分隔为两个单独的标志 此处演示: 现在,初始化时,可以通过设置autoHide:false将工具提示设置为手动显示或隐藏:
$(someDOM).tooltipX({ autoHide:false });
只需根据其他地方的需要在代码中直接执行标准的打开/关闭调用
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
一个简单的修补程序,在我有时间执行正式的拉取请求之前,这将不得不执行。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 });
如果您只想解除事件绑定,而不想创建自己的自定义工具提示
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout通过移动鼠标光标阻止工具顶消失
聚焦输出通过键盘导航阻止工具提示消失其他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();
});
我试过了。虽然它在您的示例中起作用,但实际上(在阅读代码之后)没有真正的方法阻止在mouseleave时自动关闭工具提示;@Antonimo您显示的代码只会停止动画,如果您确实检查了domTree,它会创建多个ui工具提示DOM,这绝对不是首选。不幸的是,jquery ui工具提示的编码方式是,mouselease/focusout事件会附加在“打开”之后事件,因此我们无法在附加这些事件后轻松删除它们以防止工具提示关闭。同样,只有在清除状态变量后才调用close事件,这将太晚而无法停止。在工具提示得到进一步改进之前,我们只需扩展它并进行自定义。我需要手动打开它,但是启用鼠标跟踪。如果手动打开鼠标跟踪,它似乎不起作用。处理此答案-我还简化了单击绑定到一行代码!:)(赋值表达式返回赋值)::
$(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();
});