jquery tooltip add div role="log" in my page

Question

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/

score 16 · Accepted Answer · answered Dec 19 '14 at 15:53

16

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!... :)

answered Dec 19 '14 at 15:53

Ravi Tirumale

569
6
7

2

This didn't help me. :( – sferret Jan 15 '16 at 22:48
@sferret : Which jQuery UI version you are using? Hope you added the right CSS file for it. Here you can get the alternate CSS files link for the jQuery-ui.js file https://code.jquery.com/ui/ The latest version of jQuery UI is 1.12.0-beta.1. And If you have added this, then you have to look for CSS file link of latest version 1.12.0-beta.1. – Ravi Tirumale Jan 16 '16 at 20:17
5

This accepted answer has near nothing to do with the solution to the overindulged accessibility issue of jquery-ui tooltips. I think @lepix answer below is the best option. A tear down method for the tooltip on "close". – RemEmber Feb 12 '16 at 12:56
2

this will not help avoiding the flooding of your page with those divs, only style them correctly. – Udo Klimaschewski Jul 28 '16 at 14:12
Adding the css reference worked perfectly with summernote – m0r6aN Jun 07 '19 at 15:57

score 11 · Answer 2 · answered Oct 04 '15 at 07:29

11

Simply I have added close method to my initialization and it's working fine.

close: function (event, ui) {
            $(".ui-helper-hidden-accessible").remove();
        }

answered Oct 04 '15 at 07:29

Ahmed Mostafa

419
6
16

2

this should be the accepted answer, though it is a bit dangerous if other components also use that class. – Udo Klimaschewski Jul 28 '16 at 14:10
I think it's very rarely to find another JS component use the same class "ui-helper-hidden-accessible". – Ahmed Mostafa Jul 30 '16 at 07:59
The jQuery UI button and autocomplete widgets use this class, but the class is possibly never active when the tooltip close event is triggered. – Udo Klimaschewski Jul 31 '16 at 11:14
`$("[role=log].ui-helper-hidden-accessible").remove();`, checkboxradio uses this class. – user2226755 Aug 15 '16 at 12:35
1

Thanks for the answer. It's saved my day. A similar solution found in the jquery site as well. https://bugs.jqueryui.com/ticket/10689?cversion=0&cnum_hist=2 – csharpbd Jan 03 '21 at 18:18

score 6 · Answer 3 · answered Sep 01 '16 at 07:34

6

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();
   }
});

answered Sep 01 '16 at 07:34

nuddlegg

141
1
4

this is the correct answer for me – Deloo Jan 31 '23 at 10:36

score 5 · Answer 4 · answered Sep 01 '14 at 16:40

5

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.

answered Sep 01 '14 at 16:40

David Hirtz

123
8

score 1 · Answer 5 · edited Jul 19 '14 at 14:44

1

I did find a solution for my problem.

I had to change the style of this element:

.ui-helper-hidden-accessible{
    display: none;
}

edited Jul 19 '14 at 14:44

NT3RP

15,262
9
61
97

answered Jul 19 '14 at 14:03

bnnoor

656
2
13
31

score 1 · Answer 6 · answered Aug 23 '14 at 00:57

1

I just modified the source code:

First search for .ui-helper-hidden-accessible

then remove .appendTo(this.document[0].body)

this will make the element don't append to body but won't affect the code run

then those div will only append into memory

answered Aug 23 '14 at 00:57

user3896501

2,987
1
22
25

2

This "fix" **did** affect my code - the tooltips do not get rendered properly. Instead I do this: `$("div.ui-helper-hidden-accessible div:hidden").remove();` within the `open` event on tooltip initialize function. – Andrew Gee Nov 10 '14 at 11:13
This fix worked perfectly for me - I had the CSS, so they were correctly hidden, but I was getting hundreds of the divs added to the DOM, most of which were empty (mutiple tabs, containing jQuery big Datatables with lots of tooltips.) – John - Not A Number Jan 10 '18 at 18:37

score 1 · Answer 7 · answered Nov 19 '14 at 17:49

According to this ticket from jQuery UI, this is a feature added in jQuery UI 1.11.0 to improve accessibility : http://bugs.jqueryui.com/ticket/10689

If you want to entirely remove the appended <div> from your code, you have to destroy the tooltip :

$(document).tooltip( "destroy" );

You can also go back to jQuery UI 1.10.x, the tooltip plugin of this version doesn't create supplementary <div> for accessibility purposes.

score 0 · Answer 8 · answered Mar 04 '21 at 17:26

0

add the close event handler to your tooltip initialization. this will auto-remove the useless divs.

$('#attach-id').tooltip({
    close: function () {
        $(".ui-helper-hidden-accessible > *:not(:last)").remove();
    }
});

answered Mar 04 '21 at 17:26

Konstantin T.

62
4

jquery tooltip add div role="log" in my page

8 Answers8

Linked