jQuery UI工具提示关闭图标 [英] Jquery UI tool tip close icon
问题描述
我正在尝试在页面加载时显示Jquery UI工具提示，并在工具提示内容内显示一个关闭/十字标记图标.单击X图标时应关闭工具提示.我不想使用任何插件.请提出逻辑.
尝试以下代码在5秒钟后隐藏工具提示.
var dur = 5000;$(document).tooltip({表演:{效果:'slideDown'}，跟踪:是的，打开:function(event，ui){setTimeout(function(){$(ui.tooltip).hide();}，dur);}}); 尝试以下代码以显示工具提示
<！doctype html>< html lang ="zh-CN">< 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>$(函数(){$(document).tooltip({位置: {使用:功能(位置，反馈){$(this).css(position);$(< div>").addClass("arrow").addClass(feedback.vertical).addClass(feedback.horizontal).appendTo(this);}}});});</script>< style>.ui-tooltip，.arrow:之后{背景:黑色；}.ui-tooltip {填充:10px 20px;白颜色;字体:8px"Helvetica Neue"，Sans-Serif；文本转换:大写；}.箭 {宽度:70像素；高度:16像素；溢出:隐藏；位置:绝对；左:50％；左边距:-35px;底部:-16px；}.arrow.top {顶部:-16px；底部:自动；}.arrow.left {左:80％；}.arrow:{之后内容: "";位置:绝对；左:20px；顶部:-20px；宽度:25像素；高度:25像素；框阴影:6px 5px 9px -9px黑色；-webkit-transform:旋转(45deg);-moz-transform:旋转(45deg)；-ms-transform:旋转(45deg);-o-transform:旋转(45deg);变形:旋转(45度);}.arrow.top:之后{底部:-20px；顶部:自动；}</style></head>< body>< p title =示例工具提示文本">工具提示</p></body></html> 如果要以这种方式使用工具提示，则不能使用 $(document).tooltip().而是必须使用 $(selector).tooltip().focus()，这将强制打开工具提示.
然后，您需要绑定一个click事件并执行以下操作: $(selector).tooltip("destroy").
使用您的jsfiddle，我做了以下更改:
HTML:
< p id ="p1" title =示例工具提示文本">工具提示</p> JAVASCRIPT:
$(function(){$(#p1").tooltip({items:"p"，//使用它覆盖内容-在此示例中，我使用的是"p"，但您也可以使用class/id's/etc内容:功能(){如果($(this).is("p")){var text = $(this).attr("title");返回文字+'< span style ="position:absolute; top:0; right:0;"class ="tooltipClose ui-icon ui-icon-circle-close"</span>';;}}，位置: {使用:功能(位置，反馈){$(this).css(position);$(< div>").addClass("arrow").addClass(feedback.vertical).addClass(feedback.horizontal).appendTo(this);}}}).重点();$(.tooltipClose").click(function(){$(#p1").tooltip("destroy");});}); 这是一个演示: http://jsfiddle.net/u8kX9/9/
希望这就是您要寻找的！让我知道您是否还需要其他东西！
I am trying to show Jquery UI tooltip on page load with a close/cross mark icon inside tool tip content. Tooltip should be closed on clicking X icon. I dont want to use any plugins. Please suggest logic.
Tried the below code to hide tooltip after 5 seconds.
var dur=5000;
$(document).tooltip({
show:{
effect:'slideDown'
},
track:true,
open: function( event, ui ) {
setTimeout(function(){
$(ui.tooltip).hide();
}, dur);
}
});
Tried below code to Show tooltip
<!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>
If you want to use the tooltip in this manner, you cannot use $(document).tooltip(). Instead, you would have to use $(selector).tooltip().focus(), which will force the tooltip open.
Then you would need to bind a click event and do the following: $(selector).tooltip("destroy").
Using your jsfiddle, I've done the following changes:
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");
});
});
Here is a demo: http://jsfiddle.net/u8kX9/9/
Hope this is what you're looking for! Let me know if you need anything else!
这篇关于jQuery UI工具提示关闭图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
