jquery tooltip add div role="log";在我的页面 [英] jquery tooltip add div role="log" in my page
问题描述
我对 jquery tooltip 有一个奇怪的问题.我正在使用下面的代码
<script src="http://code.jquery.com/jquery-1.10.2.js"></script><script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script><脚本>$(函数(){$(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" });});<身体><a href="link" class="addon_link tooltip" title="test1">test1</a><a href="link" class="addon_link tooltip" title="test2">test2</a><a href="link" class="addon_link tooltip" title="test3">test3</a><a href="link" class="addon_link tooltip" title="test4">test4</a></html>工具提示工作正常，但在显示标题后将它们添加到页面，并像这样放入一个 div
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div><div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>
我的页面格式如下
<script src="http://code.jquery.com/jquery-1.10.2.js"></script><script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script><脚本>$(函数(){$(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" });});<身体><a href="link" class="addon_link tooltip" title="test1">test1</a><a href="link" class="addon_link tooltip" title="test2">test2</a><a href="link" class="addon_link tooltip" title="test3">test3</a><a href="link" class="addon_link tooltip" title="test4">test4</a></html><div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div></div><div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>如何在显示后隐藏工具提示?
http://jsfiddle.net/V9R2M/2/
无需在 js 文件的源代码中编辑任何内容.您缺少 jQuery 工具提示的备用主题 (.css) 文件.只需在 head 标签中添加级联样式表链接，如下所示，&jQuery 工具提示将顺利运行
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>或者您可以使用此代码附加您自己的样式表文件(.css)
.ui-helper-hidden-accessible {边框:0；剪辑:矩形(0 0 0 0)；高度:1px；边距:-1px；溢出:隐藏；填充:0；位置:绝对；宽度:1px；}希望这对 somwone 有所帮助！... :)
I have a strange problem with jquery tooltip . I am using the code below
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" });
});
</script>
</head>
<body>
<a href="link" class="addon_link tooltip" title="test1">test1</a>
<a href="link" class="addon_link tooltip" title="test2">test2</a>
<a href="link" class="addon_link tooltip" title="test3">test3</a>
<a href="link" class="addon_link tooltip" title="test4">test4</a>
</body>
</html>
Tooltip works correctly, but after the show Title adds them to the page, and puts in a div like this
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div></div>
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>
My page is in the following form
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$(".tooltip").tooltip({ position: { my: "left-30 center+15", at: "right center" } },{ tooltipClass: "custom-tooltip-styling" });
});
</script>
</head>
<body>
<a href="link" class="addon_link tooltip" title="test1">test1</a>
<a href="link" class="addon_link tooltip" title="test2">test2</a>
<a href="link" class="addon_link tooltip" title="test3">test3</a>
<a href="link" class="addon_link tooltip" title="test4">test4</a>
</body>
</html>
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test1</div></div>
<div role="log" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>test2</div></div>
How can I hide Tooltip after the show?
No need to edit anything in the source code of js files. You are missing the alternate theme (.css) file for the jQuery Tooltips. Just add cascading style sheet link in the head tag as shown below, & the jQuery tooltip will work smoothly
<!-- jQuery style for Tooltips -->
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
OR you can append your own style sheet file(.css) with this code
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Hope this helps somwone!... :)
这篇关于jquery tooltip add div role="log";在我的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
