肉渣教程

Tooltip提示

上一节 下一节

Tooltip提示

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">左</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">上</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右</button>

<!-- 一劳永逸,全局触发 -->
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>

运行一下

Tooltip提示 - Options参数设置

有两种方式来进行参数设置:

  • 利用data-加参数名的形式构建该元素的自定义属性,比如data-trigger=""
  • 在JavaScript中使用$('#example').tooltip(options)方式


常用的Options有:

参数名 数据类型 默认值 说明
animation 布尔型 true 是否应用淡入淡出的动画效果
container 字符串或布尔型 false
delay 数字或者类字典型对象 0 显示或隐藏tooltip提示的延时时长,单位为毫秒;也可以对隐藏和显示的延时时长进行分别设置,例如取值{"show":1000, "hide":200}
html 布尔型 false 提示内容是否可以是html内容,false就代表是普通文本,推荐使用false,不建议在tooltip提示中插入html内容
placement 字符串或函数 "top" tooltip提示在哪个方向上弹出,常用取值有top/bottom/left/right
selector 字符串或布尔型 false
template 字符串 '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
title 字符串或函数 ""
trigger 字符串 "hover focus" tooltip提示的触发事件,常用的事件有 click/hover/focus/manual,不同的事件中可以组合,但是manual只能单独使用
viewport 字符串或Object对象或者函数 { selector: 'body', padding: 0 }

Tooltip提示 - JavaScript常用方法

$("#example").tooltip(option)

option命令 说明
hide 隐藏tooltip提示
show 显示tooltip提示
toggle 切换tooltip提示的隐藏和显示状态
destroy 销毁当前tooltip提示组件


示例:文档加载完毕后,自动显示tooltip

$('#example').tooltip( "show" );

运行一下

Tooltip提示 - 事件

事件 说明
show.bs.tooltip 一旦触发tooltip提示的show动作(显示)则触发该事件
shown.bs.tooltip 触发tooltip提示的show动作(显示),且tooltip提示已经显示完毕,则触发该事件
hide.bs.tooltip 一旦触发tooltip提示的hide动作(隐藏)则触发该事件
hidden.bs.tooltip 触发tooltip提示hide动作(隐藏),且tooltip提示已经隐藏完毕,则触发该事件


示例:当tooltip提示显示完毕后,则触发预设事件(弹出“反清复明”)

$('#example').on('shown.bs.tooltip', function (e) {
   alert( "反清复明" );
});

运行一下


Tooltip提示

上一节 下一节