java tooltips_一款使用纯javacript编写的轻量级tooltips工具
, p3 v3 u5 l5 i1 A { F2 e8 M
3105759564afaa4bff.png (105.65 KB, 下载次数: 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插件不依赖任何框架，内容可带HTML标签，并可以使用预设的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来调用该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在元素的什么方向上出现。
' 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标签。$ 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在参数数组中作为一个对象。
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配置参数
) 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可用的预定义颜色。可用值有：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的内容，可以是HTML标签。! \) z" H' F3 r) \3 y9 Y! Y( h! `/ i6 b(w ww.mo qu8.com)
contentMore：tooltip中显示的更多内容，会在元素聚焦时显示。- 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和目标元素之间的距离，单位像素。! ], _! ~' B- R: t2 s Y! h2 I(w ww.mo qu8.com)
targetSelector：目标元素的CSS选择器。4 q" V$ P7 q$ R( M6 I/ ]0 p- k4 G(www.m oqu8.c om)
targetXPath：目标元素的xPath值。
$ F( L& B5 S* A" a' Q6 b3 ?+ Y" qmaxWidth：tooltip的扩展文本的最大宽度。
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参数相同。
0 n, R: ?; Y) k* V0 H* N7 Ldata-tooltip-animate-function：与animateFunction参数相同。2 E5 Y/ B7 O& \' J5 H(w w w.m oq u8.c om)
data-tooltip-color：与color参数相同。
5 n( f8 p) Q3 p. jdata-tooltip-more：与contentMore参数相同。& l a! e% L- S. r(ww w.m oqu 8.c om)
data-tooltip-stickto：与stickTo参数相同。
5 X7 l1 D! m, _% q2 Rdata-tooltip-maxwidth：与maxWidth参数相同。
总结
以上是生活随笔为你收集整理的java tooltips_一款使用纯javacript编写的轻量级tooltips工具的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 爷爷的爷爷从哪里来的作者是谁啊？
- 下一篇： java 位运算 多个状态_位运算表示对