单击按钮时显示JqueryUI工具提示，而不是将鼠标悬停在其他位置
单击按钮时显示JqueryUI工具提示，而不是将鼠标悬停在其他位置
提问于 2012-10-26 14:50:55
我正在使用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"
}
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 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()来设置一个时间限制，在此时间限制之后工具提示将关闭。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13082145
复制相关文章
相似问题