How to create a tooltip in jQuery

Tommy

Moderator
Joined
Sep 28, 2012
Messages
370
Points
0
When a user such as a link or image moves with the mouse, then a very simple form of a tooltip will show.

Tooltips can be properly used as an information tool. In this tutorial I want to make a tooltip using jQuery, which provides additional information on such a link.

Title attribute

For the sake of simplicity we use the title attribute. The advantage is that people who do not use JavaScript to view the additional information.

Disadvantage of the title attribute is not sufficiently able to use HTML in the tooltip. There are still other solutions.

The advantage is that you can go with the styles of your tooltip so we go once again to work.

The css and html code

The link with the following html code into your website posted:
HTML:
<a href="#" class="location" title="A Tooltip to make all handige, additional information please view the link that used wordt, example, the contents of the HTML templates link!"> buy </ a >
We will now only add style to the tooltip. a class but as the name 'tooltip' give in stylesheet.

HTML:
    . Tooltip {
display: none;
position: absolute;
border: 1px solid # 333;
background-color: # ffed8a;
width: 200px;
padding: 2px 6px;
}
You see that the tooltip is positioned absolutely . The default tooltip with this CSS course not visible. So we have a hover function so that when the link with your mouse, the tooltip is displayed.

Based on the script

We do this with the following basis:

HTML:
    $ ('. Location "). Hover (function (e) {
/ / Hover over code
}, Function () {
/ / Hover out code
}). Mousemove (function (e) {
/ / Mouse moves code
});
Step by step insert code

We now need a step further in the code to ensure that the title is replaced hover code and convert it to a tooltip. This tool tip is at a specific position in order, depending on the location of the mouse. We use x and y coordinates.

HTML:
    / / Put this in the previous script under the rule Hover over code
title var text = $ (this). attr ('title');
$ (This)
. Data ('tipText ", title text)
. RemoveAttr ('title');
$ ('<p Class="tooltip"> </ p>')
. Text (title text)
. AppendTo ('body')
. Css ('top', (e.pageY - 10) + 'px')
. Css ('left', (e.pageX + 20) + 'px')
. FadeIn ('slow');
You see that we remove the title, but this text must of course appear in our tooltip.

W3C standard or not

We now have everything we need for the tooltip to appear. Now would the title be able to add html code. However, the W3C standard does not allow it. If you go there no problem then you can try again naturally.

Finally, the code for the hover disappear again. This is the opposite of the previous code:

HTML:
    / / This part is in the script are under Hover out code
$ (This). Attr ('title', $ (this). Dates (tipText '));
$ ('. Tooltip'). Remove ();
/ / This is the Mouse moves code
$ ('. Tooltip ")
. Css ('top', (e.pageY - 10) + 'px')
. Css ('left', (e.pageX + 20) + 'px');
At the end a short code so that the tooltip with the mouse moves along as we move it slightly. Exactly as it normally goes.

The result

The results we show in the page tooltip with 'title' . Make sure that you also use jQuery through the source code of your webpage src="jquery-1.4.min.js" <script type="text/javascript"> </ script> add. This version can be found in the folder and on your own server.
 

mostafakamal81

New member
Joined
Apr 3, 2013
Messages
5
Points
0
This is really helpful information, i tried same thing as you have shown here. I am getting following exception. Can you help me ?? Webpage error details and information.
 

Tommy

Moderator
Joined
Sep 28, 2012
Messages
370
Points
0
Tommy
Yeh, I can help you, It's easy to create a tooltip with Jquery, if you got errors, you can show here for me or anyone can help you solve it.
 
Newer threads
Replies
24
Views
10,317
Replies
4
Views
3,999
Replies
18
Views
6,798
Replies
3
Views
1,726
Replies
6
Views
3,376
Latest threads
Replies
0
Views
16
Replies
1
Views
48
Replies
1
Views
38
Replies
1
Views
53
Replies
2
Views
47

Latest postsNew threads

Referral contests

Referral link for :

Sponsors

Latest Blog ArticlesMost Viewed Threads

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top