提示工具以及弹出框

提示工具：tooltip

弹出框：popover

属性：

title / data-title      文字描述

data-content            内容部分

data-placement          弹出框的（提示工具）的位置：top、left、right、bottom

data-html               解析标签  true、false

data-animation          是否需要过渡效果 true、 false

data-delay              延迟时间

data-trigger            触发时间 click、focus、hover

方法：

tooltip()   展开show 、 隐藏hide 、 切换toggle

popover()   展开show 、 隐藏hide 、 切换toggle

事件：

show.bs.popover

shown.bs.popover

hide.bs.popover

hidden.bs.popover

需要实现以下功能，首先需要先引入bootstrap框架：

 <span title="文字描述" data-toggle="tooltip">提示工具</span>
    <button data-title="标题" data-toggle="popover" data-content="弹出框的内容部分 + <input type=‘text‘ data-toggle=‘tooltip‘ title=‘弹出框的提示工具‘ id=‘input‘>"data-placement="bottom" data-html="true"data-animation="true"data-trigger="click" id="popover">
        弹出框
    </button>

    <span title="提示文字" data-el="myTooltip">自制提示工具</span>

    <p>Lorem ipsum dolor sit amet.</p>

$(‘[data-toggle="tooltip"]‘).tooltip();
        $(‘[data-toggle="popover"‘).popover();
        $(‘#popover‘).on(‘shown.bs.popover‘, function(){
            $(‘#input‘).focus();
            $(‘[data-toggle="tooltip"]‘).tooltip();
        })

        // 自制提示工具
        var $myYoolTip = $(‘[data-el="myTooltip"]‘);
        $myYoolTip
        /*
            attr 操作属性节点  第一个参数获取属性对应的值，第二个参数设置属性的值
            hover 第一个参数鼠标移入mouseenter，第二个参数鼠标移出mouseleave
            wrap 包裹  给元素外层包裹一个容器
            after 后边插入节点
            remove 移除节点
            replaceWith 替换节点
         */
        .attr(‘data-my-tooltip‘,$myYoolTip.attr(‘title‘))
        .attr(‘title‘,‘‘)
        .hover(function(){
            $(this).wrap(‘<div class="tooltip-outer"></div>‘)
            $(this).after(‘<div class="tooltip-box" id="tooltip-box">插入的</div>‘)
        }, function(){
            $(‘#tooltip-box‘).remove();
            $(‘.tooltip-outer‘).replaceWith($myYoolTip)
        })

原文地址：https://www.cnblogs.com/xiewangfei123/p/12400848.html