jQuery 入门教程(43): jQuery UI Tooltip 示例

1

<!doctypehtml>

2

<

html

lang

=

"en"

>

3

<

head

>

4

<

meta

charset

=

"utf-8"

/>

5

<

title

>jQueryUIDemos</

title

>

6

<

link

rel

=

"stylesheet"

href

=

"themes/trontastic/jquery-ui.css"

/>

7

<

script

src

=

"scripts/jquery-1.9.1.js"

></

script

>

8

<

script

src

=

"scripts/jquery-ui-1.10.1.custom.js"

></

script

>

9

<

script

>

10

$(function(){

11

$(document).tooltip();

12

});

13

</

script

>

14

<

style

>

15

label{

16

display:inline-block;

17

width:5em;

18

}

19

</

style

>

20

</

head

>

21

<

body

>

22

23

<

p

><

a

href

=

"#"

title

=

"That's
whatthiswidgetis"

>Tooltips</

a

>canbeattachedtoanyelement.Whenyouhover

24

theelementwithyourmouse,thetitleattributeisdisplayedinalittleboxnexttotheelement,justlikeanativetooltip.</

p

>

25

<

p

>Butasit'snotanativetooltip,itcanbestyled.Anythemesbuiltwith

26

<

a

href

=

"http://themeroller.com"

title

=

"ThemeRoller:
jQueryUI'sthemebuilderapplication"

>ThemeRoller</

a

>

27

willalsostyletooltipsaccordingly.</

p

>

28

<

p

>Tooltipsarealsousefulforformelements,toshowsomeadditionalinformationinthecontextofeachfield.</

p

>

29

<

p

><

label

for

=

"age"

>Your
age:</

label

><

input

id

=

"age"

title

=

"We
askforyourageonlyforstatisticalpurposes."

/></

p

>

30

<

p

>Hoverthefieldtoseethetooltip.</

p

>

31

32

33

</

body

>

34

</

html

>