Menu
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?
http://jsfiddle.net/V9R2M/2/
992
Here's a way to remove these elements again without hacking jquery-ui:
$(elem).tooltip({
...
/* work around https://bugs.jqueryui.com/ticket/10689 */
create: function(ev, ui) {
$(this).data("ui-tooltip").liveRegion.remove();
}
});
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!... :)
29
Simply I have added close method to my initialization and it's working fine.
close: function (event, ui) {
$(".ui-helper-hidden-accessible").remove();
}
Same problem here, jQuery UI sometimes would add more than 4000 of these elements, switching back to jQuery UI 1.10.1 fixed the problem for me.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
