jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能示例
更新時(shí)間：2016年11月23日 08:57:54 作者：Blue Sky ......
這篇文章主要介紹了jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)ToolTip元素定位顯示功能的方法。分享給大家供大家參考，具體如下：
<!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>無(wú)標(biāo)題頁(yè)</title>
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
function ShowTip(event,obj,message)
{
var xOffset = -10; // x distance from mouse
var yOffset = 10; // y distance from mouse
//obj.style.top = (event.clientX + yOffset)+"px";
//obj.style.left = (event.clientY + xOffset)+"px";
//獲取元素width: $(obj).width();
//獲取元素height：$(obj).height()
//獲取元素位置：$(obj).position().top和$(obj).offset().top
$('body').append( '<div id="tipmessage">'+message+'</div>');
$('div#tipmessage').css("top", $(obj).position().top+$(obj).height() + "px").css("left", $(obj).position().left+"px").fadeIn("slow");
}
function HideTip()
{
$("div#tipmessage").fadeOut("slow").remove();
}
</script>
<style type="text/css">
#tipmessage
{
display:none;
z-index:1000;
border:1px solid #448833;
position:absolute;
background:#ffffff;
max-width:200px;
max-height:30px;
padding:5px 10px;
}
</style>
</head>
<body>
<a href="#" onmouseover="ShowTip(event,this,'歡迎訪問(wèn)腳本之家')" onmouseout="HideTip()">Tip</a>
</body>
</html>
運(yùn)行效果截圖如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery tools之tooltip
- jQuery Tools tooltip使用說(shuō)明
- jQuery帶箭頭提示框tooltips插件集錦
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- 25個(gè)優(yōu)雅的jQuery Tooltip插件推薦
- 基于jquery的自定義鼠標(biāo)提示效果 jquery.toolTip
- qTip 基于JQuery的Tooltip插件[兼容性好]
- Jquery實(shí)現(xiàn)自定義tooltip示例代碼
- jQuery插件Tooltipster實(shí)現(xiàn)漂亮的工具提示
- jquery插件tooltipv頂部淡入淡出效果使用示例
- jQuery自制提示框tooltip改進(jìn)版
相關(guān)文章
jQuery簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
目前jQuery有1.x和2.x兩個(gè)主要版本，區(qū)別在于2.x移除了對(duì)古老的IE 6、7、8的支持，因此2.x的代碼更精簡(jiǎn)。選擇哪個(gè)版本主要取決于你是否想支持IE 6~8，下文給大分享jquery 簡(jiǎn)介的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-07-07
獲取div中文本的長(zhǎng)度，然后和通過(guò)和屬性limit規(guī)定的長(zhǎng)度進(jìn)行對(duì)比，如果超出長(zhǎng)度則使用截取指定的長(zhǎng)度，后面用...替代2014-08-08
jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼
這篇文章主要介紹了jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
Jquery創(chuàng)建層顯示標(biāo)題和內(nèi)容且隨鼠標(biāo)移動(dòng)而移動(dòng)
本文為大家介紹下使用Jquery創(chuàng)建一個(gè)層顯示標(biāo)題的內(nèi)容且隨鼠標(biāo)移動(dòng)，具體的實(shí)現(xiàn)如下2014-01-01
css()方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性,下面有幾個(gè)不錯(cuò)的示例，大家可以感受下2014-01-01
這篇文章主要介紹了jQuery中remove()方法用法,以三個(gè)不同的實(shí)例形式分別演示了remove()方法刪除元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)
我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯, 最常見的就是數(shù)組和對(duì)象的操作. jQuery工具函數(shù)為我們操作對(duì)象和數(shù)組提供了便利條件.2011-02-02
jQuery實(shí)現(xiàn)仿Alipay支付寶首頁(yè)全屏焦點(diǎn)圖切換特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿Alipay支付寶首頁(yè)全屏焦點(diǎn)圖切換特效,涉及jQuery插件jquery.kinMaxShow的相關(guān)使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)拖動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jq checkbox 的全選并ajax傳參的實(shí)例
下面小編就為大家?guī)?lái)一篇jq checkbox 的全選并ajax傳參的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04