首页 前端知识 jQuery Tooltip

jQuery Tooltip

2024-08-12 10:08:05 前端知识 前端哥 797 155 我要收藏

jQuery Tooltip 插件取代了原始的工具提示框,让它可以自定义,您只需要调整它们的内容、位置和外观即可。

实例

jQuery 工具提示插件显示。

<span style="color:#333333"><!doctype html>
<html>
<头>
  <元字符集="utf-8">
  <title>jQuery UI 工具提示 - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <脚本>
  $(函数() {
    $(文档).tooltip();
  });
  </脚本>
  <样式>
  标签 {
    显示:内联块;
    宽度:5em;
  }
  </样式>
</头>
<正文>
 
<p><a href="#" title="That's what this widget is">工具提示</a>可以附加到任何元素。当你悬停时
用鼠标点击元素,title 属性会显示在元素旁边的一个小框中,就像本机工具提示一样。</p>
<p>但由于它不是原生工具提示,因此可以设置样式。使用的任何主题
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller:jQuery UI 的主题生成器应用程序">ThemeRoller</a>
还将相应地设置工具提示的样式。</p>
<p>工具提示对于表单元素也很有用,可以在每个字段的上下文中显示一些附加信息。</p>
<p><label for="age">您的年龄:</label><input id="age" title="我们询问您的年龄仅用于统计目的。"></p>
<p>将鼠标悬停在该字段上以查看工具提示。</p>
 
 
</body>
</html></span>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15408.html
标签
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!