[英]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.