, p3 v3 u5 l5 i1 A??{??F2 e8 M

3105759564afaa4bff.png (105.65 KB, 下載次數(shù): 0)

2017-6-30 20:58 上傳

, i: \% k! W& M; d$ f(ww??w.m oqu??8.c om)

簡要教程

: w6 T( ~6 w; t# G. R1 shtml5tooltipsjs是一款使用純javacript編寫的輕量級tooltips工具提示插件。該tooltips插件不依賴任何框架，內(nèi)容可帶HTML標(biāo)簽，并可以使用預(yù)設(shè)的CSS3動畫來制作tooltips動畫效果。

' ^% X9 y9 S: j# U. j/ V( n使用方法, ]' Z! i7 Z2 H9 d3 N(w ww.mo qu8.com)

基本使用方法7 d2 [" b0 U0 K( G2 R: b2 W3 M/ b??x2 b(w w w.m oq u8.c om)

- P# e5 \9 |! C4 Q& q+ E(w ww.m oqu8.c o??m)

最簡單的在某個元素上顯示tooltips的方法是在這個元素上添加data-*屬性。6 o0 x" _, x2 H! D" A8 ~! F: N(w w w.m oqu 8.c om)

? ?? ?? ???) {& s$ v5 `1 S! j9 q5 i' F% I2 R(ww w.m oq u8.c om)

高級使用方法2 r; N$ ]5 B1 |- r6 e1 F1 x' e(w w w.m oq u8.c om)

" b* @, l??k8 B( e???1 W(w ww.m oqu8.c o??m)

你也可以通過JavaScript來調(diào)用該tooltips插件。: g+ H0 |8 e+ |??N9 `/ n(w w w.m oq u8.c om)

html5tooltips({1 P/ b- C2 G1 S, q9 n(w w w.m oqu 8.c om)

contentText: "Refresh",1 h) l% y* |4 R/ [% H7 u7 u7 N(www.moqu8 .com)

targetSelector: "#refresh": D??J: `/ H' s% c. W9 ?(ww??w.m oqu??8.c om)

});? ?? ?? ?? ?? ? # r! ~9 K$ i$ e* v( B: a% k2 v(ww w.m oq u8.c om)

你可以指定tooltips在元素的什么方向上出現(xiàn)。

' m: ]: u7 ~9 c7 n, x0 Lhtml5tooltips({- }! K4 k" |$ ^, E(w ww.m oqu8.c o??m)

contentText: "Refresh",

# w/ t6 `??z6 h( O; m2 ?- O??stickTo: "right",8 x- P# u! o& {7 ^; G(www.m oqu8.c om)

targetSelector: "#refresh"

3 j4 M6 q: ^' q4 `! n0 B% F??q# |});? ?? ?? ?? ?? ? % i; ~6 C: `- `! a(ww w.m oq u8.c om)

你還可以在tooltips中添加額外的說明文本。這些文本會在元素聚焦時顯示。這個特性用于在輸入框或可編輯字段中使用。你可以使用HTML標(biāo)簽。$ p: f. V0 Z! r% p+ H$ V(w ww.m oqu8.c o??m)

html5tooltips({

8 B. l. e( ^. E% S/ H- _9 |+ m??contentText: "Not less then 8 symbols",( a( g) s3 t' d5 {$ e* P(w w w.m oq u8.c om)

contentMore: "Use lower and UPPER case letters,

; h2 _( h: _* M, i4 y??X? ?? ?? ? num6ers and

. x$ Y) c8 }+ z? ?? ?? ? spec!al symbols 0 @9 a5 W9 N) Z7 J+ n(ww w.m oq u8.c om)

to make password safe and secure.",

1 E7 ?: {) d6 F8 ~- B5 U+ ^??maxWidth: "180px",, a# e3 u( S+ C2 G(w ww.mo qu8.com)

targetSelector: "#password"( ^, ~9 f) n9 n(ww??w.m oqu??8.c om)

});? ?? ?? ?? ?? ? . E* _$ ?, |; }9 A# L# |$ v(w ww.m oqu8.c o??m)

你可以定義多個tooltips，每個tooltips在參數(shù)數(shù)組中作為一個對象。

6 P???1 T/ F$ z( h1 a; i9 C4 C) Dhtml5tooltips([5 W3 l: M: g8 A2 J% \??Y(w ww.m oqu8.c om)

{

* R' G! ^, q% E9 y" _' U? ? contentText: "Delete",

9 B) n6 s5 Q3 w' Q) [? ? targetSelector: "#delete"

7 }8 M) }5 m# }9 y+ ^??},

( F??t6 H??`/ L; T1 p8 x# I??{

: D5 x7 ?6 ]6 z4 y? ? contentText: "Refresh",

/ M, S4 M! q# P4 k) r; D) K1 K? ? stickTo: "top",

% m# K??d8 D9 @/ z7 A! V5 B? ? targetSelector: "#refresh"& z+ ~( U5 Y2 E$ I(www.moqu8 .com)

},. A% P0 N; U6 `- V* d) _??M3 R(ww??w.m oqu??8.c om)

{+ F3 s& v5 P, w(ww??w.m oqu??8.c om)

contentText: "Simple to remember",& y! I+ \' i$ d5 H(www.m oqu8.c om)

contentMore: "Check that your login name is not used by anyone else.",- ]# m% _8 u' z+ E7 b6 K$ I(www.m oqu8.c om)

stickTo: "left",

3 a; x/ [, r/ _: C? ? maxWidth: "180px",; t/ Z5 f4 `, \3 X5 d(w w w.m oqu 8.c om)

targetSelector: "#username"' [( [" z% G5 B1 j(www.moqu8 .com)

}7 |4 e- M, V7 V$ C5 \(w ww.m oqu8.c o??m)

]);

: V1 t' w( J" o$ K1 Q配置參數(shù)

) f4 m4 f- \; V8 i2 z( O% [animateFunction：tooltips可用的CSS3動畫類型。可用的動畫有：fadein，foldin，foldout，roll，scalein，slidein，spin。

' j$ p' ~??g" C2 r( N6 a4 B# |; |5 bcolor：tooltips可用的預(yù)定義顏色。可用值有：daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper，或者任何CSS顏色。/ X" h! S/ a4 h/ N(w w w.m oq u8.c om)

contentText：tooltip的內(nèi)容，可以是HTML標(biāo)簽。! \) z" H' F3 r) \3 y9 Y! Y( h! `/ i6 b(w ww.mo qu8.com)

contentMore：tooltip中顯示的更多內(nèi)容，會在元素聚焦時顯示。- A. T1 S???' ?5 q9 a(w ww.m oqu8.c om)

disableAnimation：是否禁用動畫。

2 a* ~+ L+ {( R3 j# ?8 _stickTo：tooltip顯示的位置。可用值有bottom，left，right和top。

0 R; A- c4 a# w( @% H% {stickDistance：tooltip和目標(biāo)元素之間的距離，單位像素。! ], _! ~' B- R: t2 s??Y! h2 I(w ww.mo qu8.com)

targetSelector：目標(biāo)元素的CSS選擇器。4 q" V$ P7 q$ R( M6 I/ ]0 p- k4 G(www.m oqu8.c om)

targetXPath：目標(biāo)元素的xPath值。

$ F( L& B5 S* A" a' Q6 b3 ?+ Y" qmaxWidth：tooltip的擴(kuò)展文本的最大寬度。

8 C( p; M; A6 [. ]" t. v6 q9 X可用的data-*屬性; B1 j4 Z; t* y. @2 n" r2 |(w w w.m oqu 8.c om)

D* l: W7 g7 e% ^% q. m& gdata-tooltip：與contentText參數(shù)相同。

0 n, R: ?; Y) k* V0 H* N7 Ldata-tooltip-animate-function：與animateFunction參數(shù)相同。2 E5 Y/ B7 O& \' J5 H(w w w.m oq u8.c om)

data-tooltip-color：與color參數(shù)相同。

5 n( f8 p) Q3 p. jdata-tooltip-more：與contentMore參數(shù)相同。& l??a! e% L- S. r(ww??w.m oqu??8.c om)

data-tooltip-stickto：與stickTo參數(shù)相同。

5 X7 l1 D! m, _% q2 Rdata-tooltip-maxwidth：與maxWidth參數(shù)相同。

總結(jié)

以上是生活随笔為你收集整理的java tooltips_一款使用纯javacript编写的轻量级tooltips工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。