鼠标悬浮时文字提示插件分享

工作中因为需要在网上找了一个bootstrap的插件来用，分享给没用过的朋友
使用样例

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

支持HTML格式的提示框示例

<a href="#" id="text" data-toggle="tooltip" title="<h1>bootStrap4学习之路</h1><p>漫漫长路，吾将上下求索之！</p>" data-html="true" data-placement="bottom" data-trigger="hover">显示HTML样式提示窗</a>

<script>
 $(function(){
     $('[data-toggle="tooltip"]').tooltip(); // 也可以使用 $('#text').tooltip(); 来启用弹窗
 });
</script>

也可以在方法中设置属性

$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样式是黑底白字，可以通过这个属性自定义样式。
});

声明 以上代码来源于互联网–博客园 侵删
代码样例原地址 https://www.cnblogs.com/wm218/p/10869823.html