There are lots and lots of tooltip scripts available on net. There are lot many too which provides lots of features like: fading effect, popup effects, onmouseover effects etc. The thing which encouraged me to write this tooltip script is that actually all these effects are not worth adding on my web pages due to heavy page loads, extra javascripts, CSS increases un-wanted HTTP requests and makes web page a bit slow.
The idea behind writing this script to achieve the maximum features with less code, simple, clean and simply customizable. Before getting into code actually, read it’s features below:
- 100% Cross Browser – It is compatible with almost all latest browsers. Tested on IE7, IE8, FF2, FF3, Safari 3 & 4, Chrome and Opera.
- Fully Customizable – You can change anything like: text color, background color. simply you can design the way you want it to be.
- No Extra Javascripts – It is based on few lines of CSS code and two javascript events
onmouseoverandonmouseoutto initiate and hide the tooltips respectively.- Supports Images – You can show images in your tooltips.
- Supports Videos – Yes!, you can can have videos in your tooltips.
- rest you find yourself…
We have set the tooltip DIV’s display property as none(see code below). So it wont get loaded into web page when you actually load the page. So there is no extra load on the web page. Your web pages will run with the speed as you coded them.
For example: In case of videos you can actually see this feature. Put a video inside the tooltip and see, your videos will be loaded after you takes your mouse pointer to the tooltip link. (See the live demo below)
Step 1: CSS, Read the comments carefully in the code below. You might need not to edit the things I pointed “DO NOT CHANGE”.
.SimpleTip{
position:relative;
color:blue;
}
.SimpleTip div{
/* hide tool tip box */
display: none;
}
.SimpleTipHover{
position:relative;
color:#069;
cursor: help; /* show help icon along with regular mouse icon */
}
/* style the tool tip */
.SimpleTipHover div{
/* you can change anything in the styling attributes below */
font-size: 12px;
font-weight: normal;
width:250px;
padding:4px;
border:2px solid #FFC568;
background-color:#FFF9E4;
color:#555;
/* DON'T CHANGE ANYTHING BEYOND THIS LINE */
/* making round corners for Moziall Firefox and Safari. IE dosen't support */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position:absolute;
display:block;
left:0px; /* correct positioning*/
top:auto; /* adjust positioning from top so that tool tip will come above the elemnt */
text-align: left;
/* make it visible above the all elment, z-index decide the order of elements we show on page. 5000 is much higher value and tool tip will always come above of all elements */
z-index:5000;
}
Step 2: Implementation with Javascript. Use the following html code to invoke the tooltip.
mouse over on me
I am inside the tool tip . So simple; Isn't it?
The two javascript events used in the code to invoke and hide the tooltip and actually make it like a tooltip suppose to be.
Live Demo & Download Code
Thank you so much Sachin.. This is really very helpful
Hi, Thank You very much .. very nice to look & use
Hi.
Yes, this is pretty simple and handy (my hat's off to you, Sachin), but I have a question about using it inline in a paragraph, to make adjacent items' tips pop up. I changed the <div> elements to <span> elements, and made a few other tweaks, which do seem to work *pretty well*. However, if I hover over an item that is immediately left of another tip hotspot, the text for the second one shows right through the background of the first one. I don't know about whether tips lower in the paragraph will show through, though (I have not tried that yet).
Can you suggest what I might adjust to keep all other elements on the page from showing through the backgraound of the tip's background?
Thanks a gazillion!
Burtin
Yes, I have the same problem as Burtin. Anyone found a solution yet?
Thank you very much Sachin, it is very usefull to me.
Thanks man!
Thanks, really simple tooltip.
juanca