Bootstrap3 工具提示之个人学习笔记

最新推荐文章于 2021-02-26 13:09:33 发布

原创最新推荐文章于 2021-02-26 13:09:33 发布 · 792 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstrap 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Bootstrap3创建工具提示插件。通过设置data属性，可以轻松地在按钮或链接上添加工具提示，并通过jQuery初始化事件来激活这些提示。文章还详细介绍了工具提示的各种用法、方法和事件。

Bootstrap3 工具提示

标签（空格分隔）： Bootstrap

目的

实现一个提示插件

效果图：
这里写图片描述

内容

使用data属性存储标题

<div class="container" style="margin-top:40px;">
    <div class="bs-example tooltip-demo">
      <div class="bs-example-tooltips">
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">左侧 Tooltip</button>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">上方 Tooltip</button>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下方 Tooltip</button>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右侧 Tooltip</button>
      </div>
    </div>
    <input type="text" id="testt" rel="tooltip" title="123456" />
    <a href="#" data-toggle="tooltip" title="Default tooltip" >dsafsdfasdfasdfasd</a>
</div>

//需要通过 jQuery 的初始化事件
<script type="text/javascript">
$(function() {
 $('.tooltip-demo').tooltip({
  selector: "[data-toggle=tooltip]",
  container: "body"
})
$("#testt").tooltip({})
$('a').tooltip()
})
</script>

data-toggle=”tooltip” 开启提示功能，data-placement=”top” (top,bottom,left,right) 指定工具提示的位置

2.1用法

$('#example').tooltip(options)

2.3标记

data-toggle="tooltip"

2.4方法

$().tooltip(options) 为一组元素应用工具提示
.tooltip('show') 展示工具提示
.tooltip('hide')
.tooltip('toggle') 展现或隐藏工具提示
.tooltip('destroy') 隐藏并销毁工具提示

2.5事件

事件类型	描述
show.bs.tooltip	当show方法被调用之后，此事件被立即触发
shown.bs.tooltip	当工具提示展现到用户面前之后，触发
hide.bs.tooltip	当hide方法被调用之后，此事件被立即触发
hidden.bs.tooltip	当工具提示被隐藏后，触发