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和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
jsonp跨域请求详解
2017/07/13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python获取本机外网ip的方法
2015/04/15 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python常用的json标准库
2019/02/19 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
生产管理的三大手法
2013/11/11 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
校庆标语集锦
2014/06/25 职场文书
采购员工作总结范文
2015/08/12 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers