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

Asked 19/7, 2014 at 13:39 Answered 4/3, 2021 at 17:26

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/

Append answered 19/7, 2014 at 13:39 Comment(0)

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

Citric answered 19/12, 2014 at 15:53 Comment(5)

This didn't help me. :( – Slapbang 15/1, 2016 at 22:48

@Slapbang : 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 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. – Citric 16/1, 2016 at 20:17

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". – Depressant 12/2, 2016 at 12:56

this will not help avoiding the flooding of your page with those divs, only style them correctly. – La 28/7, 2016 at 14:12

Adding the css reference worked perfectly with summernote – Prehuman 7/6, 2019 at 15:57

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

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

Kagera answered 4/10, 2015 at 7:29 Comment(5)

this should be the accepted answer, though it is a bit dangerous if other components also use that class. – La 28/7, 2016 at 14:10

I think it's very rarely to find another JS component use the same class "ui-helper-hidden-accessible". – Kagera 30/7, 2016 at 7: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. – La 31/7, 2016 at 11:14

$("[role=log].ui-helper-hidden-accessible").remove();, checkboxradio uses this class. – Osterman 15/8, 2016 at 12:35

Thanks for the answer. It's saved my day. A similar solution found in the jquery site as well. bugs.jqueryui.com/ticket/10689?cversion=0&cnum_hist=2 – Alkoran 3/1, 2021 at 18:18

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

Runyan answered 1/9, 2016 at 7:34 Comment(1)

this is the correct answer for me – Dorty 31/1, 2023 at 10:36

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.

Corrosion answered 1/9, 2014 at 16:40 Comment(0)

I did find a solution for my problem.

I had to change the style of this element:

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

Append answered 19/7, 2014 at 14:3 Comment(0)

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

Cortico answered 23/8, 2014 at 0:57 Comment(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. – Plantar 10/11, 2014 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.) – Shishko 10/1, 2018 at 18:37

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.

Bicuspid answered 19/11, 2014 at 17:49 Comment(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();
    }
});

Instinctive answered 4/3, 2021 at 17:26 Comment(0)

Recommended topics

Hot tags