我试图在页面加载时显示 Jquery UI 工具提示，并在工具提示内容内显示关闭/十字标记图标。单击 X 图标后应关闭工具提示。我不想使用任何插件。请提出逻辑。
尝试使用以下代码在 5 秒后隐藏工具提示。
var dur=5000;
$(document).tooltip({
show:{
effect:'slideDown'
},
track:true,
open: function( event, ui ) {
setTimeout(function(){
$(ui.tooltip).hide();
}, dur);
}
});
尝试下面的代码来显示工具提示
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$(document).tooltip({
position: {
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
</script>
<style>
.ui-tooltip, .arrow:after {
background: black;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
font: 8px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 80%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>
</head>
<body>
<p title="Sample Tool Tip Text">Tooltips</p>
</body>
</html>
最佳答案
如果您想以这种方式使用工具提示，则不能使用$(document).tooltip()。相反，您必须使用 $(selector).tooltip().focus()，这将强制打开工具提示。
然后您需要绑定(bind)一个点击事件并执行以下操作:$(selector).tooltip("destroy")。
使用你的 jsfiddle，我做了以下更改:
HTML:
<p id="p1" title="Sample Tool Tip Text">Tooltips</p>
JavaScript:
$(function () {
$("#p1").tooltip({
items: "p", //use this to override content - in this example, I am using "p" but you can also use classes/id's/etc
content: function (){
if ($(this).is("p") ) {
var text = $(this).attr("title");
return text + '<span style="position:absolute;top:0;right:0;" class="tooltipClose ui-icon ui-icon-circle-close"></span>';
}
},
position: {
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).focus();
$(".tooltipClose").click(function(){
$("#p1").tooltip("destroy");
});
});
这是一个演示:http://jsfiddle.net/u8kX9/9/
希望这就是您正在寻找的!如果您还需要任何其他信息，请告诉我!
关于jquery-ui - Jquery UI 工具提示关闭图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14285781/