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

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">左侧 Tooltipbutton>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">上方 Tooltipbutton>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下方 Tooltipbutton>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右侧 Tooltipbutton>
      div>
    div>
    <input type="text" id="testt" rel="tooltip" title="123456" />
    <a href="#" data-toggle="tooltip" title="Default tooltip" >dsafsdfasdfasdfasda>
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	当工具提示被隐藏后，触发