Tooltips with jQuery
Categories: Featured, JavaScript and jQuery
Written By: admin
That said, let’s come to the article itself. It’s all about a handy tooltip script based on the famous jQuery framework. Below you’ll find some examples of what effect can be achieved using it:
Basic tooltip
Tooltip with multiple lines
Tooltip with title
Forgot to define the tooltip text (nothing should happen)
Tooltip displaying an image (HTML)
Tooltip with some basic HTML (only inline elements)
SPAN element with a tooltip
I know that there are many tooltip scripts out there, but I couldn’t find any that would fit my needs, so I wrote my own. It’s easy to use and implemented within seconds. All you have to do to get it to work is to insert the JavaScript file into your site and define some CSS (feel free to change it’s look and feel)
To be inserted into your site:
<script src="path/to/jqueryTooltip.js" type="text/javascript"><!--mce:1--></script>
CSS:
/* Tooltips */ #tooltip { position: absolute; padding: 4px; color: #FFF; font-size: 11px; display: none; text-align: left; background-color: #000; opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=80); } .tooltipTitle { font-weight: bold; color: #CEE1EF; }
You’re already done! Now just give any element you want to show a tooltip the class “tooltip” (this is the default class, change it if you wish in the JavaScript file) and put your tooltip text into the title attribute. Below you’ll find different examples on how to use the script:
Basic tooltip:
<a class="tooltip" title="visit google.com" href="http://www.google.com">Google</a>
Tooltip with multiple lines:
You can force a line wrap by writing a “::”
<a class="tooltip" title="visit google.com::and find what you're looking for" href="http://www.google.com">Google</a>
Tooltip with title
You can define the title by using a BB-Code like Syntax: [!]Text[/!]
<a class="tooltip" title="[!]Important[/!]visit google.com::and find what you're looking for" href="http://www.google.com">Google</a>
Tooltip showing an image
If you want to show an image just use HTML, but replace the “<” and “>” by “[" and "]”
<a class="tooltip" title="[img src='http://the-godking.com/wp-content/uploads/2008/08/jquerytooltip.jpg' /]" href="http://www.google.com">Google</a>
Tooltip showing basic HTML
If you want to use HTML within you tooltip, just use it, but replace “<” and “>” by “[" and "]“. Please note, that only inline elements are supported.
<a class="tooltip" style="text-decoration:underline;" title="[!]Important[/!]visit [strong]google.com[/strong]::and [em]find what you're [span style=" href="http://www.google.com">Google</a>
Tooltip on any element:
You can put tooltips on (almost) any element you wish.
<span class="tooltip" title="Google is a search engine">Google</span>
Feel free to use the script on your website. If you have any questions concerning it just ask (please use the comment form below). Have fun!
September 22nd, 2008 at 2:20 am
hi, Tnx for the great work, it’s been a long time i’m searching for an easy to implement and universal tooltip based on jQuery, and I found yours, and let me tell you, BRAVO!
Just one thing, I’m trying to implement it to my new theme which will be online shortly, but the problem is that the tooltip doesn’t show everytime, and time to time, i get a “undefined” message inside the tooltip, I’m using it on a tag.
Please help.
September 22nd, 2008 at 12:43 pm
Hey Amir,
I just updated the script. Wrapping the whole thing with “jQuery(document).ready(function() { … });” does the job. Now the undefined error should’nt show up any longer
All you need to do ist to download the new version (or of course wrap your version with the above code) and there you go
September 29th, 2008 at 8:14 pm
I too was looking for a simple implimentation of this to get me going, and this is it!
The image in the image example isn’t working though - hope I can get it working for me.
Thanks for this.
October 7th, 2008 at 5:30 pm
@Kev: You were right. It actually works with images but the path was broken. I fixed it.
December 13th, 2008 at 9:42 pm
Hey can you help please this script doesn’t work for me? All I get is a link and when I hover over it then I just get the title text.
December 14th, 2008 at 1:42 am
@WebCobra: If you could post an example of your code that isn’t working I’m sure I could help you out
March 2nd, 2009 at 4:09 am
Gut!
March 21st, 2009 at 5:20 pm
Hallo ich habe auch das Problem wie WebCobra, dass der Code bei mir leider nicht geht. Habe hier den Code:
[code]
#tooltip {
background:#000000 none repeat scroll 0 0;
color:#FFFFFF;
display:none;
font-size:11px;
opacity:0.8;
padding:4px;
position:absolute;
text-align:left;
}
.tooltipTitle {
color:#CEE1EF;
font-weight:bold;
}
Google
[/code]
Die Pfade zu den Javascripten stimmen auch.
Wäre nett wenn Du mir auch helfen könntest
Viele Grüße Christian
March 21st, 2009 at 7:39 pm
Hi christian,
Du musst deinem Link die Klasse “tooltip” zuordnen. Siehe Beispiele oben. (class=”tooltip”)
Hoffe das bringt dich weiter.
Grüsse - Robert
April 1st, 2009 at 1:42 pm
Hi!
can you plz send me a simple example of you code with all the files needed.
Thanks
February 6th, 2010 at 6:07 pm
doesn’t work. Gives an error:
tooltip is not defined
source File: jqueryTooltip.js
February 6th, 2010 at 6:19 pm
PS: That’s my code:
1.) JS file is an exact copy of http://the-godking.com/wp-content/demo/jqueryTooltip/jqueryTooltip.js
2.) Inclusion in header is:
3.) CSS is also an exact copy:
#tooltip {
position: absolute;
padding: 4px;
color: #FFF;
font-size: 11px;
display: none;
text-align: left;
background-color: #000;
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
}
.tooltipTitle {
font-weight: bold;
color: #CEE1EF;
}
Link is:
Help!
Error is:
tooltip is not defined
source File: jqueryTooltip.js