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中map函数的两种方式
Apr 07 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery实时统计输入框字数及限制
Jun 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Python生成验证码实例
2014/08/21 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python多线程原理与用法详解
2018/08/20 Python
浅析python标准库中的glob
2020/03/13 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
servlet面试题
2012/08/20 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
教师一帮一活动总结
2014/07/08 职场文书
公司委托书格式范文
2014/10/09 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
单位实习介绍信
2015/05/05 职场文书
拉贝日记观后感
2015/06/05 职场文书
中学校园广播稿
2015/08/18 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
python中 .npy文件的读写操作实例
2022/04/14 Python
关于MySQL中explain工具的使用
2023/05/08 MySQL