BootStrap tooltip提示框使用小结
提示框
提示框的基本使用方式为：
<spandata-toggle="tooltip"data-original-title="thisisalertcontent">testmessage</span>
data-original-title可以直接写为title,仍然能正常使用，源码中优先查找前者，前者不存在就会查找title
提示框不提供HTML触发方式只能通过JS来进行触发：
$("[data-toggle='tooltip']").tooltip();
提示框的关键属性为data-original-title="content",该属性就是我们要提示的信息，如果不存在该属性则回去检索title属性，title的属性值同样可以用来显示
由于提示框只能通过JS来进行触发，而且data-toggle在BootStrap中就是一个说明功能的属性，所以通常提示框的元素上都会设置data-toggle="tooltip"，这只是为了可以选中这个DOM节点，也可以设置为class="xx"
提示信息默认是在元素上边显示的我们可以通过属性data-placement来进行更改,它有五个值分别为top、bottom、left、right、auto,如果设置为data-placement="auto"则选择适当的位置显示提示信息
提示框提供的剩余的几个属性分别为
1.data-animation在提示信息上应用一个fade动画，默认值为true
2.data-html可以将HTML作为提示语，默认值为false
3.data-selector如果声明selector表示的元素就可以提示信息
4.data-trigger通过什么方式来触发提示信息，默认值为focus、hover，全部值为focus、hover、click、manual可以使用多种出发方式，使用多种时中间以空格隔开
5.data-delay延迟提示信息默认值为0
6.data-container将提示信息放在执行的元素上，默认为false，当在.btn-group和.input-group内使用提示信息是要设置为data-container="body"
7.data-template提示语的默认模板
JS使用
tooltip提供了四个参数分别为：show、hide、toggle、destory分别对应显示、隐藏、切换、销毁
使用方式为：
$("[data-toggle=tooltip]").tooltip("show")
tooltip同样提供了四个事件分别为：
1.show.bs.tooltip在显示之前触发
2.shown.bs.tooltip在显示之后触发
3.hide.bs.tooltip在隐藏之前触发
4.hidden.bs.tooltip在隐藏之后触发
使用方式为：
$("[data-toggle=tooltip]").on("show.bs.tooltip",function(){})
tooptip提供的参数对象属性就是前面的集中在使用时去掉"data-"即可
基本的使用方式都很简单，这里介绍一个selector的用法，该属性一般用在新添加的元素仍然需要显示提示框的场景中，所以在使用时要在提示框的父级上绑定提示框的调用方法，事件源是selector的DOM可以触发事件，使用的就是冒泡的思想使用方式为：
$("element").tooltip({
selector:".className"
})
当在.btn-group和.input-group内的元素使用tooltip时要设置container:"body"避免不必要的副作用。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。