jQuery JqueryUI 工具提示按钮单击而不是悬停出现在其他地方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13082145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JqueryUI tooltip on button click instead of hover to appear elsewhere
提问by Swarne27
I am using JQueryUI tooltipto display some dynamic messages to the user. Basically I want to display the tooltip on top of an input field when a user clicks a button.
我正在使用JQueryUI 工具提示向用户显示一些动态消息。基本上我想在用户单击按钮时在输入字段的顶部显示工具提示。
The way I have coded it works only when hovering on top of the button, and in JQueryUI examples there's no help on achieving this scenario. How do I differ from hover effect and make it work with click event of the button? How can I achieve this?
我编码它的方式仅在将鼠标悬停在按钮顶部时才有效，并且在 JQueryUI 示例中，对于实现这种情况没有帮助。我与悬停效果有何不同并使其与按钮的单击事件一起使用？我怎样才能做到这一点？
I'm using jquery-ui-1.9.0.custom.jsand jquery-1.8.2.jsfor this.
我正在使用jquery-ui-1.9.0.custom.js和jquery-1.8.2.js为此。
HTML Code:I want to display the message on top of this input box
HTML 代码：我想在此输入框的顶部显示消息
<input id="myInput" type="text" name="myInput" value="0" size="7" />
The button which I click in-order to popup tooltip
为了弹出工具提示而点击的按钮
<input id="myBtn" type="submit" name="myBtn" value="myBtn" title="this is not used" class="myBtn" />
JQuery Code
查询代码
$(document).ready(function() {
$(".myBtn").tooltip({
content: function () {
return '<span id="msg">Message</span>';
},
position: {
my: "center bottom",
at: "center top"
}
});
});
回答by Elliott
The easiest way is to remove the title attribute of myBtnand move your tooltip onto another element. For example:
最简单的方法是删除 title 属性myBtn并将您的工具提示移动到另一个元素上。例如：
<a id="myTooltip" title="Message"></a>
Then you can do:
然后你可以这样做：
$('#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');
});
Similarly you can close the tooltip with
同样，您可以关闭工具提示
$('#myTooltip').tooltip('close');
To automatically close the tooltip after opening you just need to call the closemethod inside the openevent:
要在打开后自动关闭工具提示，您只需要调用事件close内部的方法open：
$('#myTooltip').tooltip({
open: function (e) {
setTimeout(function () {
$(e.target).tooltip('close');
}, 1000);
}
});
Using e.target(as thiswill not work inside the openevent) and setTimeout()to set a time limit after which the tooltip will close.
使用e.target（因为this在open事件内不起作用）并setTimeout()设置工具提示将关闭的时间限制。
