bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作
在bootstrap里面,有一个组件很可爱,它就是popover,它是对标签title属性的优化,奉上连接一枚:http://docs.demo.mschool.cn/components/popovers/
具体方法和实例在官网中讲解的很详细,不赘述;
由于本人用的是bootstrap4的版本,所以需要引入
tether.js,jquery.js,以及bootstrap.js,注意引入的顺序,千万不要颠倒顺序;
我写了这么一个HTML代码,如下:
<p class="sheets-item-title-info">
<span class="text-warning"><i class="fa fa-exclamation-triangle"></i>本答题卡使用的是高考统一答题卡,不可更改。</span>
<span class="text-muted rejigger-text">如何更改<i class="fa fa-question-circle"></i></span>
</p>
那么我想鼠标移上的时候出现一段文字加一个连接,很明显我们只写一个poover("show"),是远远不够的,因为鼠标移上的时候弹出框接着就小时了,根本无法去点击连接,
那么怎么写呢?如下:
$(".rejigger-text").popover({
trigger: 'manual',
placement: 'top',
html: true,
content: "<div class='rejigger-text-warp'><span class='rejigger-text-span'>若要更改为手动制作模版,请前去“创建试题结构”处点击“修改”或“重新创建试题结构”。</span><a href='#' class='rejigger-text-a'>前去更改>></a></div>",
animation: false
}).on("mouseenter", () => {
$(".rejigger-text").popover("show");
$(".rejigger-text-warp").on("mouseleave", () => {
$(".rejigger-text").popover('hide');
});
}).on("mouseleave", () => {
setTimeout(() => {
if (!$(".popover:hover").length) {
$(".rejigger-text").popover("hide")
}
}, 100);
});
});
完美解决,
不懂的可以加博主一起探究
bootstrap里面的popover组件如何使鼠标移入可以对弹出框进行一系列的操作的更多相关文章
- Bootstrap入门(二十九)JS插件6:弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- Bootstrap 弹出框(Popover)插件
Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstr ...
- vue--vant组件库Dialog弹出框
安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...
- Bootstrap-Plugin:弹出框(Popover)插件
ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...
- [Bootstrap]modal弹出框
写在前面 在实际开发中,为了友好,更需要一种美观的弹出框,js原生的alert,很难满足需求.这里推荐一个bootstrap的弹出框. 一个例子 先看效果吧 代码: <!DOCTYPE html ...
- php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失
<div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...
- Bootstrap popover弹出框
popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
随机推荐
- python学习笔记(16)--django的安装
说明: 1. 直接在cmd输入: pip install Django==1.10.6前提是安装了python,pip并添加了环境变量 2. http://www.lfd.uci.edu/~gohlk ...
- datagridview添加行
添加明细按钮 DataRow dRow = DtDetail.NewRow(); dRow["PriceId"] = ConvertUtil.GetIntFromObject(dr ...
- C语言 · 实现strcmp函数 · 字符串比较
蓝桥杯练习场上碰到两个此类题了: 算法提高 11-1实现strcmp函数 时间限制:1.0s 内存限制:256.0MB 问题描述 自己实现一个比较字符串大小的函数,也即实现strcm ...
- 小任务tasklet应用
一个使用tasklet的中断程序首先会通过执行中断处理程序来快速完成上半部分的工作,接着通过调度tasklet使得下半部分的工作得以完成,但是下半部分何时执行属于内核的工作. 由于tasklet依靠软 ...
- mkyaffs2image编译
http://blog.chinaunix.net/uid-26009923-id-3760474.htmlhttp://blog.csdn.net/xingtian19880101/article/ ...
- UI领域中常常听见的''modal''到底是什么?
模态窗口其实就是个弹窗.... 问题总结 用户需要采取操作或取消覆盖,直到他可以继续与原始页面进行交互, 这是最原始的modal定义, 本质上是页面在时间维度上的中断系统: 来自wiki百科: Mod ...
- iOS边练边学--通知机制和键盘处理小练习
一.发送通知 NSNotification *note = [NSNotification notificationWithName:@"通知的名称,随便写,例如:你妈叫你回家吃饭" ...
- java-pageEncoding与contentType的区别
pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容编码 JSP要经过两次的“编码”,第一阶段会用pageEncoding,第二阶段会用 ...
- 数据库 proc编程八
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...
- The request lifetime scope cannot be created because the HttpContext is not available
项目中应用了Autofac,在Global轮询处理Job的时候,需要获取现有得Service,而这些Service已经通过Autofac进行了配置,所以理所应当的用下面的代码去获取了. Depende ...