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
参考资料