All geek questions in one place

JQuery tooltip add div role = "log" to my page

I have a weird problem with jquery hint. 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>

The tooltip works correctly, but after the Title show adds them to the page and places them 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 as follows

 <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 to hide the hint after the show?

http://jsfiddle.net/V9R2M/2/

+6
source share
7 answers

No need to edit anything in js source code. You are missing an alternative theme file (.css) for jQuery tooltips. Just add the cascading style link to the title tag as shown below and 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 add your own stylesheet 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! ... :)

+9
source

I just added a close method to my initialization and it works fine.

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

I found a solution for my problem.

I had to change the style of this element:

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

I just changed the source code:

First search .ui-helper-hidden-accessible

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

this will cause the element not to be added to the body, but will not affect the code run

then these divs will only be added to memory

+1
source

The same problem here, the jQuery user interface sometimes adds more than 4000 such elements, switching to jQuery UI 1.10.1 fixed the problem for me.

+1
source

Here you can remove these elements without hacking jquery-ui:

 $(elem).tooltip({ ... /* work around https://bugs.jqueryui.com/ticket/10689 */ create: function(ev, ui) { $(this).data("ui-tooltip").liveRegion.remove(); } });
+1
source

According to this ticket from the jQuery user interface, this function was added to jQuery UI 1.11.0 to improve accessibility: http://bugs.jqueryui.com/ticket/10689

If you want to completely remove the added <div> from your code, you need to destroy the tooltip:

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

You can also return to jQuery UI 1.10.x, the tooltip plugin of this version does not create additional <div> for accessibility purposes.

0
source

Source: https://habr.com/ru/post/972500/

More articles:


All Articles