我有一个带有jQuery UI工具提示的页面,该工具提示最初是打开的,并且它在mouseout
事件上的关闭被禁用。
现在,我希望工具提示在用户单击它本身之后关闭,而不是在显示工具提示的元素上(就像这里的许多其他答案一样)。
作为可能的解决方案之一,我想我可以向工具提示的div添加一个click
处理程序,然后从那里关闭它。但是,我找不到一种标准的方法来使用tooltip小部件API获取工具提示的div,或者以其他方式附加处理程序。
我采用上述方法是否正确?或者如何以不同的方式实现我所追求的?
JSFiddle说明我目前拥有的内容。
我找到了一个相对简单的解决方案,通过在工具提示的open
事件中附加click
处理程序并关闭那里的工具提示,无需破解Tooltip 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();
});
JSFiddle
试试这个:
$(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');
});
});
});
- 更新的JSFiddle
- jQuery UI工具提示API
试试这个:
$(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');
});
});
请参阅此处的小提琴
根据Alexes回答,如果你只想在点击"X"时关闭:
$(".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/