jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
更新时间：2020年04月04日 11:10:41 作者：未闻花名_zh
这篇文章主要介绍了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法,结合实例形式分析了jQuery结合bootstrap插件实现的鼠标响应式提示框相关操作技巧,需要的朋友可以参考下
本文实例讲述了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>www.jb51.net 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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了js代码实现轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了JS+CSS实现精美的二级导航效果代码,涉及JavaScript基于鼠标事件动态变换元素样式的技巧,非常简单实用,需要的朋友可以参考下2015-09-09
这篇文章主要分享10个常见的前端手写功能，防抖、节流、深拷贝、异步控制并发数、继承等功能技巧，具有一定的参考价值，需要的小伙伴可以参考一下2022-02-02
preload.js文件在Electron应用中起着桥梁的作用,使得在保持安全的同时,渲染进程可以访问主进程的功能,保持渲染进程与主进程隔离的同时,又能使渲染进程具有访问特定Electron API的能力的方法,本文给大家分享electron中preload.js文件的用法,感兴趣的朋友一起看看吧2024-04-04
这篇文章主要介绍了javascript编程开发中取色器及封装$函数,结合实例形式分析了javascript封装$函数及数值运算、页面元素动态操作实现取色器功能相关技巧,需要的朋友可以参考下2017-08-08
展开运算符是JavaScript中的语法糖,用三个点(...)表示,广泛应用于数组和对象的操作,本文介绍了其基本用法,如在数组和对象中的应用,合并数组或对象,更新对象属性等,还探讨了展开运算符的高级应用,需要的朋友可以参考下2024-09-09
在Javascript中,每个对象都有一个指向另一个对象的链接,这个链接被称为原型链,原型链是Javascript的一种继承机制,它通过链接对象的原型对象来实现属性和方法的继承,本文小编就来和大家一起深度探索JavaScript中的原型链机制2023-09-09
这篇文章主要介绍了JavaScript 实现拖拽效果组件功能(兼容移动端),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
下面小编就为大家带来一篇老生常谈JavaScript面向对象基础与this指向问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
彻底搞懂JS无缝滚动代码...2007-01-01
最新评论