Bootstrap popover 实现鼠标移入移除显示隐藏功能方法

该段js代码可实现 popover 下鼠标移入移除时显示、隐藏 popover 提示信息功能

var strContent = '<div class="media"><div class="position-left media-left"><img class="img-circle" src="/assets/images/avatar.jpg">'+
         '</div>'+
         '<div class="media-body">'+
          '<h4 class="media-title">小标题</h4>'+
          '<p><strong>张三</strong> <span class="label label-primary">管理员</span></p>'+
         '</div>'+
         '</div>';
$( 'li#user_avatar' ).popover({
  trigger:'manual',
	placement:'bottom',
	html:true,
	container:'#bs-example-navbar-collapse-1',
	content:strContent,
}).on( 'mouseenter', function(){
  var _this = this;
  $(this).popover( 'show' );
  $(this).siblings( '.popover' ).on( 'mouseleave' , function () {
    $(_this).popover( 'hide' );
  });
}).on( 'mouseleave', function(){
  var _this = this;
  setTimeout(function () {
    if (!$( '.popover:hover' ).length) {
      $(_this).popover( 'hide' )
    }
  }, 100);
});

以上这篇Bootstrap popover 实现鼠标移入移除显示隐藏功能方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • bootstrap 点击空白处popover弹出框隐藏实例

    代码: <div> <a class="btn btn-success show" title="Popover title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的 Popover 中的一些内容"> aaaa </a>

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

    弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 /

  • BootStrap自定义popover,点击区域隐藏功能的实现

    当用bootstrap时,经常需要在某个地方添加帮助按钮,点击或者鼠标悬浮时,提示帮助信息,然而,bt给我们提供的方法里貌似没有,如果有哪位大神知道bootstrap有的可以留言,小弟学习了:代码如下 之前的按钮必须定义class为pop: $(function(){ $(".pop").popover({placement:'right', trigger:'manual', delay: {show: 10, hide: 10}, html: true, title: functi

  • BootStrap使用popover插件实现鼠标经过显示并保持显示框

    BootStrap使用popover插件实现鼠标经过显示并保持显示框

    在商城里,导航栏的购物车展示经常需要鼠标经过时,显示已经放入购物车的商品,bootstrap是没有直接用的插件的,这个时候就可以使用popover这个插件改造后实现,具体如下: 实现效果图: html实现: <a href="#" rel="drevil"> <span class="glyphicon glyphicon-shopping-cart"> </span> 购物车 </a> javas

  • Bootstrap popover 实现鼠标移入移除显示隐藏功能方法

    该段js代码可实现 popover 下鼠标移入移除时显示.隐藏 popover 提示信息功能 var strContent = '<div class="media"><div class="position-left media-left"><img class="img-circle" src="/assets/images/avatar.jpg">'+ '</div>'+

  • Android实现标题显示隐藏功能

    Android实现标题显示隐藏功能

    本文实例尝试模仿实现Android标题显示隐藏功能,通过给listview设置 mListView.setOnTouchListener 监听 重写ontouch方法 监听手指一动的坐标,当超过ViewConfiguration.get(this).getScaledTouchSlop(); toubar的高度 .当向上滑动超过这个高度显示touba 向下滑动隐藏. 效果图: package com.example.hidetitlebardemo; import android.animati

  • Android中实现EditText密码显示隐藏的方法

    Android中实现EditText密码显示隐藏的方法

    在Google发布了support:design:23+以后我们发现有这么一个东西TextInputLayout,先看下效果图: <android.support.design.widget.TextInputLayout android:id="@+id/pwdLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:passw

  • Android软键盘的显示隐藏功能实现过程

    Android软键盘的显示隐藏功能实现过程

    一.软键盘显示的原理 软件盘的本质是什么?软键盘其实是一个Dialog! InputMethodService为我们的输入法创建了一个Dialog,并且将该Dialog的Window的某些参数(如Gravity)进行了设置,使之能够在底部或者全屏显示.当我们点击输入框时,系统对活动主窗口进行调整,从而为输入法腾出相应的空间,然后将该Dialog显示在底部,或者全屏显示. 二.活动主窗口调整 android定义了一个属性,名字为windowSoftInputMode, 用它可以让程序可以控制活动主

  • 微信小程序实践之动态控制组件的显示/隐藏功能

    组件有个属性:hidden='' ,值为true/false ,当false的时候说明不隐藏,当true的时候说明隐藏,注意该隐藏是不保留组件位置的. 实现即 .js 配合.wxml 文件 一.在.js 文件下的 Page({}) 里面 的data:{} 里面 创建一个布尔类型的属性 二.在.wxml文件下构建一个view组件 验证: 1.false,不隐藏的时候 2.true,隐藏的时候 总结 以上所述是小编给大家介绍的微信小程序实践之动态控制组件的显示/隐藏功能,希望对大家有所帮助,如果大家

  • angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    如下所示: ng-true-value="1" //代表选中的时候,值为1 ng-false-value="0" //代表未选中的时候,值为0 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script

  • vue实现select下拉显示隐藏功能

    今日,怂怂就来说说,在项目中刚遇到这么一个功能需求: 描述:当下拉选择不同的属性选项,需展示对应的内容界面: select下拉菜单如下: 当下拉选择[表结构变更].即展示如下界面: 当下拉选择[接口变更].即展示如下界面: 代码实现 vue.js: //定义一个select下拉菜单 <el-form-item label="类型"> <el-select v-model="form.typeChanges"> <el-option la

  • vue实现密码显示隐藏功能的思路详解

    vue实现密码显示隐藏功能的思路详解

    效果: 思路: 利用input的type属性,当type值是text的时候展示密码,当type值是password的时候隐藏密码: 于是很容易想到用v-bind来绑定type,同时用一个布尔值来控制,写成三元表达式的形式: 加入一个图片元素,点击图标元素切换这个布尔值,就可以达到切换显示隐藏,切换布尔值的同时也切换图标. 页面布局 <div id='app'> <!--三元表达式 pwdFlag为真则type是password密码隐藏 pwdFlag为假则type是text密码显示 --

  • js实现input密码框显示/隐藏功能

    js实现input密码框显示/隐藏功能

    JavaScript实现input密码框显示/隐藏的功能,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display:

  • 网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法

    网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示.于是跟踪http请求,发现woff字体请求出现GET .woff 404 (Not Found)的问题,但是项目中woff字体的文件并未丢失.后经排查,原来是服务器上IIS没有添加woff字体的MIME类型,导致发送HTTP请求时,IIS无法处理和识别此类型的文件. 解决方法1:在Web.config配置文件中添加woff字体的MIME类型 解放方法2:在IIS中添加woff字体的MIME类型 woff字体

随机推荐