提示工具以及弹出框

 <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)
        })