jquery 工具提示在我的页面中添加 div role="log"

2024-05-03

我对 jquery tooltip 有一个奇怪的问题。 我正在使用下面的代码

<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

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

我的页面是以下形式

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

演出结束后如何隐藏工具提示?

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


无需编辑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" />

或者您可以使用此代码附加您自己的样式表文件(.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;
}

希望这对某人有帮助!...:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jquery 工具提示在我的页面中添加 div role="log" 的相关文章

随机推荐

  • 是否已经有一些基于 std::vector 的 set/map 实现?

    对于小型集合或地图 通常使用排序向量而不是基于树的向量要快得多set map 特别是对于 5 10 个元素的情况 LLVM 有一些类本着这种精神 http llvm org docs ProgrammersManual html ds se
  • 从对象中获取类型正在返回运行时类型[重复]

    这个问题在这里已经有答案了 我有一个简单的功能 public string getType object obj Type type obj getType return type FullName 如果您在运行时创建的字符串对象上使用此函
  • 在Python中随机化列表[重复]

    这个问题在这里已经有答案了 我想知道是否有一个好方法来 震动 Python 中的项目列表 例如 1 2 3 4 5 可能会被动摇 随机化 3 1 4 2 5 任何顺序都同样可能 from random import shuffle list
  • 如何从节点服务器发送 Firebase 云消息传递?

    有什么办法可以发送通知吗FCM from a node js server 我在文档中没有找到任何有关它的内容 通过 Firebase Cloud Messaging 发送消息需要调用 HTTP 端点 如发送下游消息的文档 https fi
  • Python 中 Goto 标签的替代方案?

    我知道我不能使用 Goto 我也知道 Goto 不是答案 我读过类似的问题 但我只是想不出解决我的问题的方法 所以 我正在编写一个程序 你必须在其中猜测一个数字 这是我遇到问题的部分的摘录 x random randint 0 100 I
  • 如何在 Elixir 或 Phoenix 框架中安排代码每隔几个小时运行一次?

    假设我想每 4 小时发送一堆电子邮件或重新创建站点地图或其他任何内容 我该如何在 Phoenix 或仅使用 Elixir 做到这一点 有一个简单的替代方案 不需要任何外部依赖项 defmodule MyApp Periodically do
  • 离子和电容器 - Android 启动画面响应能力

    Context 这与闪屏图像响应能力有关 根据我的研究 它之所以发生是因为缺少文档电容器文档 启动画面 https capacitorjs com docs apis splash screen Problem 当实现电容器的闪屏插件时 问
  • 在 JavaScript 中给变量字符串加上引号

    我有一个 JavaScript 变量 var text http example com 文本可以是多个链接 如何在变量字符串周围放置 例如 我希望字符串看起来像这样 http example com var text http examp
  • 遍历 globals() 字典

    我 尝试 使用globals 在我的程序中迭代所有全局变量 我就是这样做的 for k v in globals iteritems function k v 当然 这样做时 我只是创建了另外 2 个全局变量 k and v 所以我得到这个
  • 为 MoonAPNS 创建 p12 文件时卡住了

    我在创建 p12 证书时遇到一些问题 我之前创建了一个带有推送通知的应用程序 效果很好 应用程序获取用户设备 ID 并将其保存到数据库中 我已将代码添加到我的新应用程序中 并进行了与新应用程序一起使用的修改 从日志来看 它的工作方式似乎与我
  • 如何以编程方式使用 TestNG 运行 Selenium Java 测试?

    我使用 Selenium RC 和 Java 使用 TestNG 作为测试框架 我使用 Eclipse 作为 IDE 我想非常轻松地从我自己的程序中调用 TestNG 我怎样才能做到这一点 我的以下 Java 代码运行良好 Test pub
  • Angular 8 - 删除 ng-component 标签 - 表行模板

    我有一个灵活的表格组件 有两种模式 普通表 有效 自定义行模板 这不是因为角度添加
  • firebase函数链中间件

    有没有办法像 Express 一样在 普通 firebase 函数上链接中间件 ordinary 功能 addNote https onRequest req res next gt addNote req res next using e
  • 打包用来部署跨平台?

    在 Windows 上 应用程序通常打包为 MSI 在 Redhat Linux 上打包为 RPM 可用于将应用程序部署到所有平台 包括不同风格的 UNIX 和 Windows 的最佳开源打包方法是什么 内容包括 exe unix 二进制文
  • 多个指令 [myPopup、myDraggable] 请求新的/隔离的范围

    我编写了一个对话框指令 myPopup 和另一个用于拖动此对话框的指令 myDraggable 但我总是收到错误 多个指令 myPopup myDraggable 请求新的 隔离的范围 这是一个笨蛋 http plnkr co edit k
  • 从 Julia 中的文本文件读取数据矩阵

    我有一个包含矩阵的文本文件 我想在朱莉娅中将其作为矩阵来阅读 文本文件如下 0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 1 0 0 0 1 1 0 在 matlab 中 您可以执行以下操作来创建矩阵M
  • Cloudfront函数总是返回503

    如何为 Cloudfront 上的静态托管网站的子目录设置默认根对象 https stackoverflow com questions 31017105 how do you set a default root object for s
  • 基于动态集合视图的 UITableView 的动态高度

    我必须添加一个UICollectionView里面一个UITableViewCell The collectionView可以有不同数量的项目 所以collectionView应在内部适当调整tableView 我已经在我的项目中实现了这个
  • 在 Android 应用程序中读取 CSV 文件

    我正在开发一个概念验证应用程序 以便我可以在我正在制作的更大的应用程序中实现该功能 我对 Java 和 Android 开发有点陌生 但希望这个问题不会太简单或太复杂 基本上 我试图从 CSV 文件中读取字符串列表 并使其可用于在应用程序的
  • jquery 工具提示在我的页面中添加 div role="log"

    我对 jquery tooltip 有一个奇怪的问题 我正在使用下面的代码