提示工具以及弹出框

Posted 2020-11-27 xiewangfei123

提示工具：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)
        })