jquery tooltip在我的页面中添加div role ="log"

Question

jquery tooltip在我的页面中添加div role ="log"

我有一个jquery工具提示的奇怪问题.我正在使用下面的代码

<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>

Run Code Online (Sandbox Code Playgroud)

工具提示工作正常,但在显示标题后将它们添加到页面,并放入这样的div

<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>

Run Code Online (Sandbox Code Playgroud)

我的页面采用以下形式

<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>

Run Code Online (Sandbox Code Playgroud)

如何在节目后隐藏工具提示？

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

Answer 1

小智 14

无需在js文件的源代码中编辑任何内容.您缺少jQuery工具提示的备用主题(.css)文件.只需在head标签中添加级联样式表链接,如下所示,jQuery工具提示将顺利运行

<!-- jQuery style for Tooltips -->
<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

Run Code Online (Sandbox Code Playgroud)

或者您可以使用此代码附加您自己的样式表文件(.css)

.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

Run Code Online (Sandbox Code Playgroud)

希望这有助于somwone!... :)

这对我没有帮助。:( (2认同)
这个被接受的答案与jquery-ui工具提示的过度可访问性问题的解决方案几乎没有任何关系.我认为下面的@lepix答案是最好的选择."关闭"工具提示的拆卸方法. (2认同)
这无助于避免这些 div 淹没您的页面，只能正确设置它们的样式。 (2认同)

Answer 2

Ahm*_*afa 9

简单地说,我已经为我的初始化添加了密切的方法,它工作正常.

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

Run Code Online (Sandbox Code Playgroud)

这应该是公认的答案，尽管如果其他组件也使用该类会有点危险。 (2认同)

Answer 3

小智 6

这是一种在不破坏 jquery-ui 的情况下再次删除这些元素的方法：

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

Run Code Online (Sandbox Code Playgroud)

Answer 4

小智 5

同样的问题，jQuery UI 有时会添加超过 4000 个这些元素，切换回 jQuery UI 1.10.1 为我解决了这个问题。

归档时间：	11 年，4 月前
查看次数：	9112 次
最近记录：	9 年，2 月前