tooltip提示框元件

tooltip 提示框元件

可獨立於其他元件

通過$.fn.tooltip.defaults重寫預設的defaults。

當使用者移動滑鼠指標在某個元素上時，出現提示資訊視窗來顯示額外資訊。提示內容可以包含任何來自頁面的或者通過ajax生成的html元素。

1、建立提示框

從標記建立提示框（tooltip），新增『easyui-tooltip』 class到元素，不需要任何的j**ascript**

hover me

使用js建立提示框（tooltip）

click here

$("#dd").tooltip();

}});

2、屬性

position string 提示框（tooltip）位置。可能的值：『left』，『right』，『top』，『bottom』 bottom

content string 提示框（tooltip）內容,可以放html標籤 null

trackmouse boolean 如果設定為true，提示框（tooltip）會隨著滑鼠移動 false

deltax number 提示框（tooltip）位置的水平距離 0

deltay number 提示框（tooltip）位置的垂直距離 0

showevent string 引發提示框（tooltip）出現的事件 mouseenter

hideevent string引發提示框（tooltip）消失的事件 mousele**e

showdelay number 顯示提示框（tooltip）的時間延遲 200

hidedelay number 隱藏提示框（tooltip）的時間延遲 100

3、事件

onshow e 當顯示提示框（tooltip）時觸發

onhide e 當隱藏提示框（tooltip）時觸發

onupdate content 當提示框（tooltip）內容更新時觸發

onposition left，top 當提示框（tooltip）位置更改時觸發

ondestory none 當提示框（tooltip）銷毀時觸發

4、方法

options none 返回選項（options）屬性（property）

tip none 返回提示（tip）物件

arrow none 返回箭頭（arrow）物件

show e 顯示提示框（tooltip）

hide e 隱藏提示框（tooltip）

update content 更新提示框（tooltip）內容

reposition none 重置提示框（tooltip）位置

destory none 銷毀提示框（tooltip）

<
html
>
<
title
>index
title
>
<
head
>
<
meta 
charset
="utf-8"
>
<
script 
type
="text/j**ascript"
src="easyui/jquery.min.js"
>
script
>
<
script 
type
="text/j**ascript"
src="easyui/jquery.easyui.min.js"
>
script
>
<
script 
type
="text/j**ascript"
src="easyui/locale/easyui-lang-zh_cn.js"
>
script
>
<
script 
type
="text/j**ascript"
src="js/index.js"
>
script
>
<
link 
rel="stylesheet"
type
="text/css"
href
="easyui/themes/default/easyui.css"
>
<
link 
rel="stylesheet"
type
="text/css"
href
="easyui/themes/icon.css"
>
head
>
<
body
>
<
div 
style
="width:400px;height:400px; margin-left:400px; margin-top:100px;"
>
<
a id
="box"
href
="j**ascript:void(0)"
>hover me
a>
div>
body
>
html
>
$(function(),
//onhide : function(e),
//onposition : function(left , top),
ondestory : function(e),
//onupdate : function(content)
});//$("#box").click(function());
//$("#box").click(function());
"#box").tooltip("options"));
//$("#box").tooltip("show");
//$("#box").tooltip("hide");
});

我使用$("#box").tooltip('destory');銷毀提示框的時候總是報錯

MFC中新增ToolTip提示框

為視窗或其中的控制項新增提示框，可以使用mfc的類ctooltipctrl，使用方法如下 1.在視窗的類定義中新增變數說明 class ctooltiptestdlg public cdialog 2.在對話方塊的oninitdialog 函式中新增如下 enabletooltips true m ...

CSS3實現Tooltip提示框飛入飛出動畫

我們見過很多利用背景製作的tooltip提示框，但是缺點是擴充套件比較麻煩，要經常改動。還有就是利用多層css的疊加實現，但是效果比較生硬，外觀不怎麼好看。今天我來分享一下利用css3快速實現既美觀又實用的tooltip提示框，提示框伴有飛入飛出的動畫效果。先來看看效果圖。看上去還簡單吧，其實實現的...

tooltip提示框元件

MFC中新增ToolTip提示框

CSS3實現Tooltip提示框飛入飛出動畫

CSS3實現Tooltip提示框飛入飛出動畫

相關推薦