脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap的popover

BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

 更新时间：2016年04月03日 09:10:30   作者：前门攻城狮  
弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。本文给大家介绍BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法，喜欢的朋友参考下吧

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。

1 设置延时， 超过该延时未移入弹窗则弹窗隐藏

Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}

2 控制不消失代码

在Tooltip.prototype.enter = function (obj) {中的

clearTimeout(self.timeout)后加入

if (self.options.trigger.indexOf('hover') > -1) {
self.$tip.unbind('mouseenter').bind('mouseenter', function (e) {
self.$tip.data('data-element', self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = 'in';
}).unbind('mouseleave').bind('mouseleave', function (e) {
self.hoverState = 'out';
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
})
}

　　bootstrap版本：v3.3.6

下面给大家补充弹出框（Popover）用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：

通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>

通过 JavaScript：通过 JavaScript 启用弹出框（popover）：

$('#identifier').popover(options)

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

$(function () { $("[data-toggle='popover']").popover(); });

您可能感兴趣的文章:

相关文章

  • js如何取消事件冒泡

    js如何取消事件冒泡

    事件冒泡是什么意思这里就不为大家一一赘述了，下面为大家讲解的是js中如何取消事件冒泡，感兴趣的朋友可以参考下
    2013-09-09
  • Echarts通过dataset数据集实现创建单轴散点图

    Echarts通过dataset数据集实现创建单轴散点图

    这篇文章主要为大家详细介绍了Echarts如何通过dataset数据集实现创建单轴散点图，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-02-02
  • JS实现闭包中的沙箱模式示例

    JS实现闭包中的沙箱模式示例

    这篇文章主要介绍了JS实现闭包中的沙箱模式,结合实例形式分析了闭包模块化实现沙箱模式的原理、步骤与相关操作技巧,需要的朋友可以参考下
    2017-09-09
  • JS中setTimeout和setInterval的最大延时值详解

    JS中setTimeout和setInterval的最大延时值详解

    这篇文章主要介绍了JS中setTimeout和setInterval的最大延时值的相关资料，文中通过示例代码介绍的很详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-02-02
  • JS添加删除一组文本框并对输入信息加以验证判断其正确性

    JS添加删除一组文本框并对输入信息加以验证判断其正确性

    需要添加几组数据到数据库，但是具体几组数据不确定，有客户来填写，所以，这里我用JS进行添加删除子方案，并要对方案输入的正确性加以判断，感兴趣的朋友可以了解下
    2013-04-04
  • JS计算输出100元钱买100只鸡问题的解决方法

    JS计算输出100元钱买100只鸡问题的解决方法

    这篇文章主要介绍了JS计算输出100元钱买100只鸡问题的解决方法,简单描述了100元钱买100只鸡问题并结合实例形式分析了问题解决的思路与具体实现方法,需要的朋友可以参考下
    2018-01-01
  • JS获取和修改元素样式的实例代码

    JS获取和修改元素样式的实例代码

    下面小编就为大家带来一篇JS获取和修改元素样式的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS+CSS实现仿支付宝菜单选中效果代码

    JS+CSS实现仿支付宝菜单选中效果代码

    这篇文章主要介绍了JS+CSS实现仿支付宝菜单选中效果代码,涉及JavaScript基于鼠标事件动态设置页面css样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 打豆豆小游戏 用javascript编写的[打豆豆]小游戏

    打豆豆小游戏 用javascript编写的[打豆豆]小游戏

    用javascript 写了一个打豆豆的游戏，至于怎么玩的就不细说了，到网上搜一下就知道了，很简单,感兴趣的朋友可以了解下哦
    2013-01-01
  • JavaScript实现流星雨效果的示例代码

    JavaScript实现流星雨效果的示例代码

    这篇文章主要为大家详细介绍了如何利用JavaScript实现简易的流星雨的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论