- Joined
- Sep 28, 2012
- Messages
- 189
- Points
- 28
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:
We will now only add style to the tooltip. a class but as the name 'tooltip' give in stylesheet.
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:
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.
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:
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.
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 >
HTML:
. Tooltip {
display: none;
position: absolute;
border: 1px solid # 333;
background-color: # ffed8a;
width: 200px;
padding: 2px 6px;
}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
});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');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');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.
