zoukankan      html  css  js  c++  java
  • bootstrap popover 如何在hover状态移动到弹出上不消失

    bootstrap中的popover其实就是对tooltip做了一定升级,拥有了标题和内容

    概要

    • 使用的时候依赖第三方插件
    • 依赖tooltip插件
    • 必须初始化
    • title 和 content 可以在popover上展示
    • 指定 container:'body' 属性,它就会在body中生成相应的div,也可以局限在某个元素中
    • 含有 display的无法显示出popover
    • 内容和标题没有的时候不会显示popover
    • 当在多行文本中展示的时候,popover会居中,可以使用 white-space
    $(function () {
      $('.example-popover').popover({
        container: 'body'
      })
    })
    

    配置

    名字 类型 默认值 描述
    animation boolean true 允许使用动画
    container string false popover在哪个元素中的后面展示
    content string or element or element '' 如果元素中存在 data-content属性就不起作用,如果使用function,需要return html内容
    delay number 0 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用 delay:{ show: 500, hide: 100 }
    html boolean false 向弹出框插入 HTML
    placement string or function 'right' top or bottom or left or right 也可以使用auto 也可以用 function 第一个参数是弹出的dom,第二个参数是触发的dom
    selector string false 提供了一个选择器,弹出框对象将被委派到指定的目标
    template string '' html属性为true,可以修改popover的模板
    title string or function or element '' 同content
    trigger string 'click' 可以指定不同的触发事件 click hover focus manual 其中manual不能和任何一起使用

    方法

    事件

    实现

    上面已经介绍了popover的很多东西,来具体看看如何实现

    $(".pop").popover({ trigger: "manual" , html: true, animation:false})
        .on("mouseenter", function () {
            var _this = this;   // 这里的this触发的dom,需要存起来 否则在下面 .popover的逻辑中this会变为弹出的dom
            $(this).popover("show");
            $(".popover").on("mouseleave", function () {
                $(_this).popover('hide'); 
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                }
            }, 300);
    });
    

    demo http://jsfiddle.net/mayufo/369dp5sy/2/

    参考资料

    https://v4-alpha.getbootstrap.com/components/popovers/
    http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html

  • 相关阅读:
    C++(函数默认参数)
    C++(引用六)
    C++(引用五)
    C++(引用四)
    C++(引用三)
    C++(引用二)
    C++(引用一)
    划水。。。
    2019.11.7
    lyc——2019.10.31
  • 原文地址:https://www.cnblogs.com/mayufo/p/7094496.html
Copyright © 2011-2022 走看看