我正在使用JQueryUI tooltip向用户显示一些动态消息。基本上,我想在用户单击按钮时在输入字段的顶部显示工具提示。
我编写代码的方式只有在悬停在按钮上时才有效,而在JQueryUI示例中,没有任何帮助来实现这种情况。如何区别悬停效果并使其与按钮的单击事件一起工作?我如何才能做到这一点?
为此,我使用了jquery-ui-1.9.0.custom.js
和jquery-1.8.2.js
。
超文本标记语言代码:我要在此输入框顶部显示消息
<input id="myInput" type="text" name="myInput" value="0" size="7" />
我单击该按钮以弹出工具提示
<input id="myBtn" type="submit" name="myBtn" value="myBtn" title="this is not used" class="myBtn" />
JQuery代码
$(document).ready(function() {
$(".myBtn").tooltip({
content: function () {
return '<span id="msg">Message</span>';
},
position: {
my: "center bottom",
at: "center top"
}
});
});
发布于 2012-10-26 17:14:39
最简单的方法是删除myBtn
的title属性,并将工具提示移动到另一个元素上。例如:
<a id="myTooltip" title="Message"></a>
然后您可以执行以下操作:
$('#myTooltip').tooltip({
//use 'of' to link the tooltip to your specified input
position: { of: '#myInput', my: 'left center', at: 'left center' }
});
$('#myBtn').click(function () {
$('#myTooltip').tooltip('open');
});
同样,您可以使用以下命令关闭工具提示
$('#myTooltip').tooltip('close');
要在打开后自动关闭工具提示,只需在open
事件中调用close
方法:
$('#myTooltip').tooltip({
open: function (e) {
setTimeout(function () {
$(e.target).tooltip('close');
}, 1000);
}
});
使用e.target
(因为this
将不会在open
事件中工作)和setTimeout()
来设置一个时间限制,在此时间限制之后工具提示将关闭。
https://stackoverflow.com/questions/13082145
复制相似问题