Tooltip created by jquery

The tooltip is applicable to many applications.ProgramAnd web browsers. However, we can simulate the tooltip through custom text, so that we can remind users of how to operate in a proper place, and play a proper guiding effect, which is also a small humanized design. Tooltip is a small function that can be implemented using JavaScript.CodeWhile jquery is clear and clear. Let's focus on writing functional code.

The following is the most basic tooltip model:

Show me the money

Follow me...

The following is the jquery code:

Code
1 < Script Type = " Text/JavaScript " >
2 This . Tooltip =   Function (){
3 VaR Positiontooltip =   Function (Event ){
4 VaR Tposx = Event. pagex -   5 ;
5 VaR Tposy = Event. Pagey + 20 ;
6 $ ( ' Div. tooltip ' ).Css ({top: tposy, left: tposx });
7 };
8 VaR Showtooltip =   Function (Event ){
9 // $ ('Div. tooltip '). Remove ();
10 Thistxt = $ ( This ). ATTR ( ' Title ' );
11 $ ( This ). ATTR ( ' Title ' , "   " );
12 $ ( ' <Div class = "tooltip"> ' + Thistxt + ' </Div> ' ). Appendto ( ' Body ' );
13 Positiontooltip (event );
14 };
15 VaR Hidetooltip =   Function (){
16 $ ( This ). ATTR ( ' Title ' , Thistxt );
17 $ ( ' Div. tooltip ' ). Remove ();
18 };
19 $ ( ' A. Show ' ). Hover (showtooltip, hidetooltip). mousemove (positiontooltip );
20 };
21 $ (Document). Ready ( Function (){
22 Tooltip ();
23 });
24 < / SCRIPT>
25

HTML code is very simple. You only need to label a class as the hook for Program Calling.

1 < Div Class = "Test" >
2 < P > < A Href = "#" Class = "Show" Title = "We don't have anymore money! " > Show me the money </ A > </ P >
3 < P > < A Href = "#" Class = "Show" Title = "Follow me! Go! Go! Go! " > Follow me </ A > </ P >
4 </ Div >
5