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插件
Mar 29 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
jQuery插件实现图片轮播效果
Oct 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
php5 pdo新改动加载注意事项
2008/09/11 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
selenium+python实现自动登录脚本
2018/04/22 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
客服文员岗位职责
2013/11/29 职场文书
财务内勤岗位职责
2014/04/17 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2014年个人年终总结
2015/03/09 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技