如何修改bootstrap的popover支持鼠标移到弹出层上弹窗层不隐藏

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

时间: 2024-11-08 04:18:06

如何修改bootstrap的popover支持鼠标移到弹出层上弹窗层不隐藏的相关文章

ECshop鼠标划过弹出 微信扫一扫代码

 效果如上图 安装步骤:1,将以下代码放到page_header.lbi里   <div class="f_l"><a href="../index.php" name="top"><img src="../images/logo.gif" /></a></div> 的后面 <a href="../index.php" name="

jQuery实现的鼠标悬浮链接弹出跟随图片代码

jQuery实现的鼠标悬浮链接弹出跟随图片代码:本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.so

鼠标提上去弹出提示层(定位)

希望的效果如图: 网上找了各纯css的 做了下修改: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style> .logo1{     width:150px;     height:60px;     float:left } a.alt{ positi

JavaScript总结之鼠标划过弹出div单击出现对话框

为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认或取消.其实部分想要的功能可以从中截取. js代码: 1 <script type="text/javascript"> 2 function sAlert_jobdel(str){ 3 var msgw,msgh,bordercolor; 4 msgw=400;//提示窗口的

获取鼠标坐标并且根据鼠标位置不同弹出不同内容

获取鼠标坐标,并且根据鼠标所在div弹出不同内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <head

Bootstrap 模态框(也可以说的弹出层)

最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html页面的写法如下: <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> <script src="bootstrap/js/j

鼠标经过时弹出下拉菜单

<style type="text/css">#cssdropdown, #cssdropdown ul {padding: 0;margin: 0;list-style: none;}#cssdropdown li {float: left;position: relative;}.mainitems{border: 1px solid black;background-color: #FFEEC6;}.mainitems a{margin-left: 6px;margi

基于jQuery鼠标点击弹出登陆框效果

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo

工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display=="none") {//下面就简单了 不一一赘述了 divs.style.display="block" }else{ divs.style.display="none" } } js原生代码实现 鼠标点击 弹出 隐藏 div隐藏