tooltip (提示框) 是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。
属性
常用的功能,可以通过以下属性来设置:
data-toggle = "tooltip"
指明这是一个tooltip组件对象,其实可以省略
title = "这里设置展示的文字"
提示框显示的内容。
data-trigger = "{click | hover | focus | manual}"
触发提示框的方式:
1、click 【默认】单击时显示或关闭
2、hover 移上去显示,移出去隐藏
3、focus 单击时显示,点击空白处时隐藏
4、manual 手动模式。需要调用js代码触发显示或关闭提示框
data-html = "{false | true}"
设置提示框内容是否支持HTML格式。默认值:false
当值为true时,title属性值可以设置成html代码。不过建议不要这么设置,以防XSS攻击
data-delay = "{数值}"
设置提示框延迟显示。比如 data-delay = "1000" 时,提示框会在执行后1秒才显示。默认值:0
data-animation = {true | false}
是否动画效果显示提示框。默认值 :false不显//代码效果参考:http://hnjlyzjd.com/hw/wz_24393.html
示动画效果。data-container = {string | false}
默认值false,
当提示框用于按钮组、表单或表格时,必须指定选项容器:'body'以避免不必要的副作用,(例如当触发弹出窗口时元素变宽和/或失去圆角)。
data-container = "body"
data-placement = {left | top | right | bottom | auto}
设置提示框的显示位置,支持多种设置,比如data-placement="auto left"时,提示窗尽可能显示在左边,在情况不允许的情况下它才显示在右边
简单的提示框HTML代码示例:
1 [/span>a href="#" id="text" data-toggle="tooltip" title="这是一段显示的文字" data-placement="right" data-trigger="hover"
2 [/span>script
3 $(function(){
4 $('【data-toggle="tooltip"】').tooltip(); // 也可以使用 $('#text').tooltip(); 来启用弹窗
5 });
6
支持HTML格式的提示框示例:
1 [/span>a href="#" id="text" data-toggle="tooltip" title="bootStrap4学习之路
漫漫长路,吾将上下求索之!
" data-html="true" data-placement="bottom" data-trigger="hover"
2
3 [/span>script
4 $(function(){
5 $('【data-toggle="tooltip"】').tooltip(); // 也可以使用 ('#text').tooltip(); 来启用提示框
6 });
7
方法
还可以通过tooltip的option设置来实现更多功能,tooltip函数原型:
1 $obj.tooltip({
2 title: '', // 提示框显示的文本内容。如果同时设置了属性的title,则优先属性title设置
3 placement: '【left | top | right | bottom】', // 等同于data-placement,级别优先于data-placement设置
4 html: 【true | false】, // 等同于data-html,级别优先于data-html设置
5 animation: 【true | false】, // 等同于data-animation,级别优先于data-animation设置
6
7 delay: 【数值】, // 等同于data-delay,级别优先于data-delay设置
8 // 也可以设置显示延迟 或 隐藏延迟,如下:
9 delay: {
10 show: 【数值】, // 显示延迟
11 hide: 【数值】 // 隐藏延迟
12 },
13
14 trigger: '【click | hover | focus | manual】', // 等同于data-trigger,级别优先于data-trigger设置
15
16 container: 【string | false】, // 等同于data-container,
17
18 selector: 【string | false】, // 选择器,设置某一对象下指定的元素为tooltip组件
19
20 template: 【string】 // 默认值:'[/span>div class="tooltip" role="tooltip"div class="arrow"
// 缺省下tooltip样式是黑底白字,可以通过这个属性自定义样式。
21 });
使含有rel="tooltip"的链接变成tooltip组件:
1 [/span>a href="#" rel="tooltip" title="这是一段提示文本"
2 [/span>script
3 $(function(){
4 $('a【rel="tooltip"】').tooltip({
5 trigger: 'hover',
6 delay: 300,
7 placement: 'bottom'
8 });
9 });
10
selector 选择器,设置某一对象下指定的元素为tooltip组件,演示代码:
1 [/span>div class="demo" data-trigger="hover"
2 [/span>a href="#" rel="tooltip" title="1111111111"
3 [/span>a href="#" rel="tooltip" title="2222222222"
4
5 [/span>a href="#" rel="tooltip" title="0000000"
6 [/span>script
7 $(function(){
8 $('.demo').tooltip({
9 selector: 'a【rel="tooltip"】'
10 });
11 });
12
注意:上例中data-trigger设置在了demo元素上面,如果设置在a标签上是无效的!
使用template,更改tooltip样式,演示代码:
1 [/span>style
2 / 自定义tooltip的背景色及字体颜色 /
3 .define-tooltip-inner{
4 background:#ccc;
5 color: #000
6 }
7
8 / 自定义tooltip四个不同方向箭头样式 /
9 .tooltip.bs-tooltip-top .define-tooltip-arrow::before {
10 top: 0;
11 border-Width</span>: 0.4rem 0.4rem 0;
12 border-top-color: #ccc;
13 }
14
15 .tooltip.bs-tooltip-right .define-tooltip-arrow::before {
16 right: 0;
17 border-Width</span>: 0.4rem 0.4rem 0.4rem 0;
18 border-right-color: #ccc;
19 }
20
21 .tooltip.bs-tooltip-left .define-tooltip-arrow::before {
22 left: 0;
23 border-Width</span>: 0.4rem 0 0.4rem 0.4rem;
24 border-left-color: #ccc;
25 }
26
27 .tooltip.bs-tooltip-bottom .define-tooltip-arrow::before {
28 bottom: 0;
29 border-Width</span>: 0 0.4rem 0.4rem;
30 border-bottom-color: #ccc;
31
style="background-color: rgba(245, 245, 245, 1);