jQuery實(shí)現(xiàn)鼠標(biāo)放置名字上顯示詳細(xì)內(nèi)容氣泡提示框效果的方法分析
本文實(shí)例講述了jQuery實(shí)現(xiàn)鼠標(biāo)放置名字上顯示詳細(xì)內(nèi)容氣泡提示框效果的方法。分享給大家供大家參考，具體如下：
實(shí)現(xiàn)效果如上圖，當(dāng)鼠標(biāo)放置到名字上時(shí)，則顯示出內(nèi)容詳情。
實(shí)現(xiàn)具體過(guò)程如下：
1、需要加這句js
<!--實(shí)現(xiàn)鼠標(biāo)放置名字上顯示氣泡說(shuō)明的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="此處是氣泡顯示內(nèi)容的變量">變量名稱(chēng)</a> </td>
這樣就可以實(shí)現(xiàn)氣泡效果了，還是挺有意思的一個(gè)小效果。
PS：經(jīng)過(guò)腳本之家測(cè)試，此處缺少了bootstrap相關(guān)組件，這里給出了一個(gè)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>chabaoo.cn jQuery氣泡提示框</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link 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="此處是氣泡顯示內(nèi)容的變量">變量名稱(chēng)</a>
</td>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
});
</script>
</body>
</html>
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js代碼實(shí)現(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)精美的二級(jí)導(dǎo)航效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)變換元素樣式的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
分享10個(gè)常見(jiàn)的JavaScript前端手寫(xiě)功能
這篇文章主要分享10個(gè)常見(jiàn)的前端手寫(xiě)功能，防抖、節(jié)流、深拷貝、異步控制并發(fā)數(shù)、繼承等功能技巧，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-02-02
electron中preload.js文件的用法小結(jié)
preload.js文件在Electron應(yīng)用中起著橋梁的作用,使得在保持安全的同時(shí),渲染進(jìn)程可以訪問(wèn)主進(jìn)程的功能,保持渲染進(jìn)程與主進(jìn)程隔離的同時(shí),又能使渲染進(jìn)程具有訪問(wèn)特定Electron API的能力的方法,本文給大家分享electron中preload.js文件的用法,感興趣的朋友一起看看吧2024-04-04
javascript編程開(kāi)發(fā)中取色器及封裝$函數(shù)用法示例
這篇文章主要介紹了javascript編程開(kāi)發(fā)中取色器及封裝$函數(shù),結(jié)合實(shí)例形式分析了javascript封裝$函數(shù)及數(shù)值運(yùn)算、頁(yè)面元素動(dòng)態(tài)操作實(shí)現(xiàn)取色器功能相關(guān)技巧,需要的朋友可以參考下2017-08-08
JavaScript展開(kāi)運(yùn)算符用法及實(shí)際應(yīng)用詳解
展開(kāi)運(yùn)算符是JavaScript中的語(yǔ)法糖,用三個(gè)點(diǎn)(...)表示,廣泛應(yīng)用于數(shù)組和對(duì)象的操作,本文介紹了其基本用法,如在數(shù)組和對(duì)象中的應(yīng)用,合并數(shù)組或?qū)ο?更新對(duì)象屬性等,還探討了展開(kāi)運(yùn)算符的高級(jí)應(yīng)用,需要的朋友可以參考下2024-09-09
在Javascript中,每個(gè)對(duì)象都有一個(gè)指向另一個(gè)對(duì)象的鏈接,這個(gè)鏈接被稱(chēng)為原型鏈,原型鏈?zhǔn)荍avascript的一種繼承機(jī)制,它通過(guò)鏈接對(duì)象的原型對(duì)象來(lái)實(shí)現(xiàn)屬性和方法的繼承,本文小編就來(lái)和大家一起深度探索JavaScript中的原型鏈機(jī)制2023-09-09
JavaScript 實(shí)現(xiàn)拖拽效果組件功能(兼容移動(dòng)端)
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)拖拽效果組件功能(兼容移動(dòng)端),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問(wèn)題
下面小編就為大家?guī)?lái)一篇老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
徹底搞懂JS無(wú)縫滾動(dòng)代碼...2007-01-01