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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现动态操作table行
Nov 23 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
PHP4.04简明安装
2006/10/09 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
php中如何执行linux命令详解
2018/11/06 PHP
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
vue 组件使用中的一些细节点
2018/04/25 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python Django模板的使用方法
2016/01/14 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
对python中list的五种查找方法说明
2020/07/13 Python
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
经典演讲稿范文
2013/12/30 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
先进班组事迹材料
2014/12/25 职场文书
工程主管竞聘书
2015/09/15 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python