jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析


Posted in jQuery onApril 04, 2020

本文实例讲述了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法。分享给大家供大家参考,具体如下:

jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析

实现效果如上图,当鼠标放置到名字上时,则显示出内容详情。

实现具体过程如下:

1、需要加这句js

<!--实现鼠标放置名字上显示气泡说明的js-->
<script>
$(function () {
  $('[data-toggle="popover"]').popover()
});
</script>

2、html代码如下:

<td>
<a href="#" rel="external nofollow" rel="external nofollow" data-trigger="hover" title="此处可输入题目" data-container="body" data-toggle="popover" data-placement="right" data-content="此处是气泡显示内容的变量">变量名称</a>
</td>

这样就可以实现气泡效果了,还是挺有意思的一个小效果。

PS:经过三水点靠木测试,此处缺少了bootstrap相关组件,这里给出了一个demo示例供大家参考:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery气泡提示框</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-table/1.15.0/bootstrap-table.min.css" rel="external nofollow" rel=stylesheet/>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<td>
<a href="#" rel="external nofollow" rel="external nofollow" data-trigger="hover" title="此处可输入题目" data-container="body" data-toggle="popover" data-placement="right" data-content="此处是气泡显示内容的变量">变量名称</a>
</td>
<script>
$(function () {
  $('[data-toggle="popover"]').popover()
});
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
You might like
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
浅析return false的正确使用
2013/11/04 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
什么是Python变量作用域
2020/06/03 Python
python如何更新包
2020/06/11 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
前台文员我鉴定
2014/01/12 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
合作意向协议书范本
2014/03/31 职场文书
农业生产宣传标语
2014/10/08 职场文书
新教师个人总结
2015/02/06 职场文书
摩登时代观后感
2015/06/03 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书