jquery tooltip add div role=“log” in my page

问题

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/

回答1:

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

回答2:

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

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

回答3:

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.

回答4:

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

回答5:

I did find a solution for my problem.

I had to change the style of this element:

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

回答6:

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

回答7:

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.

来源：https://stackoverflow.com/questions/24841028/jquery-tooltip-add-div-role-log-in-my-page

标签

jquery

jquery-ui-tooltip