[英]jQuery UI Tooltip: Close on click on tooltip itself
我有一个带有 jQuery UI 工具提示的页面,该页面最初是打开的,并且它在mouseout
事件上的关闭被禁用。
现在,我希望工具提示在用户单击它本身后关闭,而不是在显示工具提示的元素上(与此处的许多其他答案一样)。
作为可能的解决方案之一,我想我可以向工具提示的 div 添加一个click
处理程序并从那里关闭它。 但是我找不到使用 Tooltip 小部件 API 获取工具提示的 div 或以其他方式附加处理程序的标准方法。
通过上述方法,我是否走在正确的轨道上? 或者如何以不同的方式实现我所追求的目标?
JSFiddle说明了我目前的情况。
我找到了一个相对简单的解决方案,无需通过在工具提示的open
事件中附加click
处理程序并在那里关闭工具提示来破解工具提示 API:
$('.first')
.tooltip({
content: 'Click to close',
position: { my: 'left center', at: 'right center' },
items: '*'
open: function (event, ui) {
var $element = $(event.target);
ui.tooltip.click(function () {
$element.tooltip('close');
});
},
})
.tooltip('open')
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
试试这个:
$(document).ready(function(){
$('.first')
.tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' })
.tooltip('open')
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
})
// when the tooltip opens (you could also use 'tooltipcreate'), grab some properties and bind a 'click' event handler
.on('tooltipopen', function(e) {
var self = this, // this refers to the element that the tooltip is attached to
$tooltip = $('#' + this.getAttribute('aria-describedby')); // we can get a reference to the tooltip via the `aria-describedby` attribute
// bind a click handler to close the tooltip
$tooltip.on('click', function() {
$(self).tooltip('close');
});
});
});
试试这个:
$(document).ready(function(){
$('.first').on('mouseout focusout', function(event) {
event.stopImmediatePropagation()
})
.tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' }).tooltip('open');
$( "body" ).delegate( ".ui-tooltip", "click", function() {
$('.first').tooltip('close');
});
});
在这里看到小提琴
如果您只想在点击“X”时关闭,则基于 Alexes 的回答:
$(".t1").tooltip({
content: "<div><div class='tit'>Some super titlet</div> <div class='x'>x</div><div class='con'>Some content super super long</div></h1>",
disabled: true,
width:550,
tooltipClass: "myClass",
open: function (event, ui) {
var $element = $(event.target);
ui.tooltip.each(function () {
$("div.x",this).click(function () {
$element.tooltip('close');
});
});
},
}).on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$(".tooltip").click(function() {
$(this)
.tooltip("open")
});
在这里看到它: http : //jsfiddle.net/analienx/h639vzaw/73/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.