bootstrap对话框

<body>
<div class="container">
  <h1 class="page-header">对话框</h1>
  
  <p><a title="这是一个提示信息" rel="tooltip" href="#">Tooltip</a></p>
  <p><a title="提示信息标题" data-content="提示信息详细内容" rel="popover" href="#">Popover</a></p>
 
</div>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
$("a(rel=tooltip)").tooltip()
$("a(rel=popover)").popover()
</script>
</body>

a标签
-title属性:提示信息的内容
-rel属性:值为tooltip
script标签:包含语句$("a(rel=tooltip)").tooltip(),意为,当a标签的rel属性值为tooltip时,使用tooltip插件显示提示信息。

a标签
-title属性:提示信息的标题
-data-content属性:提示信息的内容
-rel属性:值为popover
script标签:包含语句$("a(rel=popover)").popover(),意为,当a标签的rel属性值为popover时,使用popover插件显示提示信息。

tooltip工具提示信息

鼠标悬停在文字上方时,显示工具提示信息(title的值)。

popover工具提示信息

鼠标悬停在文字上方时,显示工具提示信息的标题(title的值)和内容(data-content的值)。此处只显示了提示信息的标题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 7,169评论 0 42
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,406评论 1 41
  • Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一...
    亮亮叔家的小笔笔阅读 1,232评论 0 4
  • 这个夏天有你陪伴,更加精彩!更加美好!
    偶然之处花盛开阅读 149评论 0 0
  • 第一章 我和你是永生之年的莫逆之交,遇见你是我今生最大的幸运 我爱你,你却永远不知道,暗恋了你...
    浅夏如沫阅读 95评论 0 0