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 submit()不能提交表单的解决方法
Apr 24 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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的日期与时间函数技巧
2008/04/24 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
使用jquery操作session方法分享
2015/01/22 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
js实现五星评价功能
2017/03/08 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
详解vuex的简单使用
2018/03/12 Javascript
vue的mixins属性详解
2018/03/14 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
几个人围成一圈的问题
2013/09/26 面试题
实习自我鉴定范文
2013/10/30 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
暑期培训随笔感言
2014/03/10 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
python数字图像处理:图像的绘制
2022/06/28 Python