bootStrap4 提示框（tooltip）的使用

参考文章：https://www.cnblogs.com/wm218/p/10869823.html

 

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不显示动画效果。
data-container = {string | false}	默认值false， 当提示框用于按钮组、表单或表格时，必须指定选项容器：'body'以避免不必要的副作用，（例如当触发弹出窗口时元素变宽和/或失去圆角）。 data-container = "body"
data-placement = {left | top | right | bottom | auto}	设置提示框的显示位置，支持多种设置，比如data-placement="auto left"时，提示窗尽可能显示在左边,在情况不允许的情况下它才显示在右边

实例：

<a href="#" id="text" data-toggle="tooltip" title="这是一段显示的文字" data-placement="right" data-trigger="hover">右边显示内容</a>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip(); // 也可以使用 $('#text').tooltip(); 来启用弹窗
});
</script>

方法

还可以通过tooltip的option设置来实现更多功能，tooltip函数原型： 

$obj.tooltip({
    title: '', // 提示框显示的文本内容。如果同时设置了属性的title，则优先属性title设置
    placement: '[left | top | right | bottom]', // 等同于data-placement，级别优先于data-placement设置
    html: [true | false], // 等同于data-html，级别优先于data-html设置
    animation: [true | false], // 等同于data-animation，级别优先于data-animation设置

    delay: [数值], // 等同于data-delay，级别优先于data-delay设置
    // 也可以设置显示延迟 或 隐藏延迟，如下：
    delay: {
        show: [数值], // 显示延迟
        hide: [数值]  // 隐藏延迟
    },

    trigger: '[click | hover | focus | manual]', // 等同于data-trigger，级别优先于data-trigger设置

    container: [string | false], // 等同于data-container,

    selector: [string | false], // 选择器，设置某一对象下指定的元素为tooltip组件

    template: [string] // 默认值：'<div class="tooltip" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>                          //  缺省下tooltip样式是黑底白字，可以通过这个属性自定义样式。
});