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滚动插件scrollable.js用法分析
May 25 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery实现全选按钮
Jan 01 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
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP运行模式汇总
2016/11/06 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
python zip文件 压缩
2008/12/24 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python3.4爬虫demo
2019/01/22 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
《美丽的彩虹》教学反思
2014/02/25 职场文书
中学校庆方案
2014/03/17 职场文书
医学专业自荐信
2014/06/14 职场文书
2014年节能工作总结
2014/12/18 职场文书
迟到检讨书范文
2015/01/27 职场文书
旅游安全责任协议书
2016/03/22 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
Python实现照片卡通化
2021/12/06 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技