bootstrap里的提示工具

最新推荐文章于 2022-11-11 16:44:44 发布

ZXH0122

最新推荐文章于 2022-11-11 16:44:44 发布

阅读量628

点赞数

分类专栏：前端文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/ZXH0122/article/details/104615328

版权

前端专栏收录该内容

84 篇文章

订阅专栏

本文详细介绍了如何使用 Bootstrap 的 popover 和 tooltip 功能创建弹出框和提示工具，包括各种属性设置如弹出位置、触发方式等，以及自定义弹出框的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本描述：
data-content:内容部分
data-placement:弹出框的位置
data-html：解析代码 true false
data-animation：是否有过渡 true false
data-delay：弹出框的延迟时间
data-template:自定义弹出框
data-trigger:触发方式 click fouce hover

方法：
popover() tooltip()
方法里的值：show展开，隐藏hide，切换toggle

 <span title="文字描述" data-toggle="tooltip">提示工具</span>
    
    <button 
    title="这是弹出框的提示" 
    data-toggle="popover"
    data-content="弹出框的内容部分<input type='text' id='input'data-toggle='tooltip' title='弹出框里的弹出框'>"
    data-placement="bottom"
    data-html="true"
    data-animation="false"
    data-delay="1000"
    data-trigger="hover"
    id="popover">
    
    弹出框</button>

 <script>
        //必须初始化
        $("[data-toggle='tooltip']").tooltip()
        $("[data-toggle='popover']").popover()

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

扩展一个自己制作的提示框：
html：

<span title="" datat-my-tooltip="提示工具" data-el="myTooltip">自制提示工具</span>

script：

 var $myTooltip = $('[data-el="myTooltip"]')
        $myTooltip
            /*
            attr：操作属性节点（'第一个参数 获取属性对应的值''第二个参数 设置属性的值'）
            hover （'第一个参数 鼠标移入' '第二个参数 鼠标移出'）
            wrap 给元素外层包裹一个容器
            after 后面插入一个容器
            remove 移出节点
            replaceWith 替换节点
            */
            .attr('datat-my-tooltip',$myTooltip.attr('title'))
            .attr('title','')
            .hover(function(){
                console.log("移入")
                $(this)
                    .wrap('<div class="tooltip-outer"></div>')  
                    $(this).after('<div class="tooltip-box" id="tooltip-box">插入的</div>')
                    },function(){
                
                $('#tooltip-box').remove();
                $('.tooltip-outer').replaceWith($myTooltip)
                console.log("移出");
            })

本文只是简单的介绍，希望本文能帮到你。
如不理解或者想要更深了解，请查询官网。