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 相关文章推荐
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现tab栏切换效果
Dec 22 jQuery
jQuery冲突问题解决方法
Jan 19 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实现获取及设置用户访问页面语言类
2014/09/24 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Python简单生成随机数的方法示例
2018/03/31 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
利用python修改json文件的value方法
2018/12/31 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python pycharm的安装及其使用
2019/10/11 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
python可视化text()函数使用详解
2020/02/11 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Python接口自动化测试的实现
2020/08/28 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
党性心得体会
2014/09/03 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
中学生运动会广播稿
2015/08/19 职场文书
初中语文教学反思范文
2016/03/03 职场文书