[英]jQuery UI Tooltip: Close on click on tooltip itself
I have a page with a jQuery UI tooltip that is initially opened and its closing on mouseout
event is disabled.我有一个带有 jQuery UI 工具提示的页面,该页面最初是打开的,并且它在
mouseout
事件上的关闭被禁用。
Now, I want the tooltip to close after a user clicks on it itself, not on the element for which the tooltip is shown (as many other answers here).现在,我希望工具提示在用户单击它本身后关闭,而不是在显示工具提示的元素上(与此处的许多其他答案一样)。
As one of the possible solutions, I thought I can add a click
handler to the tooltip's div and close it from there.作为可能的解决方案之一,我想我可以向工具提示的 div 添加一个
click
处理程序并从那里关闭它。 But I can't find a standard way to obtain the tooltip's div with the Tooltip widget API or attach the handler in some other way.但是我找不到使用 Tooltip 小部件 API 获取工具提示的 div 或以其他方式附加处理程序的标准方法。
Am I on the right track with the approach above?通过上述方法,我是否走在正确的轨道上? Or how to achieve what I am after in a different way?
或者如何以不同的方式实现我所追求的目标?
JSFiddle illustrating what I have for the moment. JSFiddle说明了我目前的情况。
I've found a relatively simple solution without hacking the Tooltip API via attaching a click
handler in the tooltip's open
event and closing the tooltip there:我找到了一个相对简单的解决方案,无需通过在工具提示的
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();
});
Try this:试试这个:
$(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');
});
});
});
Try this:试试这个:
$(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');
});
});
Based on Alexes answer if you wanted to close only on hitting "X":如果您只想在点击“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")
});
See it here: http://jsfiddle.net/analienx/h639vzaw/73/在这里看到它: http : //jsfiddle.net/analienx/h639vzaw/73/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.