我使用
JQueryUI工具提示向用户显示一些动态消息.基本上,我想在用户单击按钮时在输入字段顶部显示工具提示.
我编码的方式只有在将鼠标悬停在按钮顶部时才起作用,而在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"
}
});
});
解决方法
最简单的方法是删除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);
}
});
