Sexy Tooltips for Everyone!
When sexing up your blog/webpage/whatever, you create all the beautiful graphics and user-centric layouts. Thats great! I’m proud. When you are lacking that little something though, consider tooltips for the added pop.
What are these tooltips you speak of William? Good Question. Just take a look yourself by hovering over a link. If you’re using a decent browser, you’ll see a little window under the link describing it. Cool eh?
Why use the Tooltips?
There are tons of tooltip systems online, and I mean TONS! Why should you consider mine? Simplicity. I’ve have noticed developers want a flexible framework in which they can customize it for their needs. My system has no unneeded code and no unnecessary frills. It just gets the job done. Some of these other systems have quite a learning curve that would make it undesirable to use when you’re just going to modify the code anyway. For those that feel this way, my system is for you! If you’re a new developer looking for an easy and simple/clean looking solution, this is also for you!
How do you use them?
My tooltip system hooks into your standard title field. In more detail, any link on your page can have be given a title. Here is a sample:
<a href=”somehwere.html” title=”Hey! Here’s a link somewhere!”>Click to go!</a>
As you probably already know, the href section tells your link where to go. The title section is where the tooltip magic comes in. It hooks into this field and displays that text underneath the link. So if you want to add a tooltip to a link, just add a title. Don’t want a tooltip? Thats cool, just put a blank title or no title at all.
Will everyone see it?
Yes and no. It is tested to work with IE6+, Safari (Mac and Windows), Opera, and FF1.5+. So in reality it should work for all users or at least 90% of the population.
How do you install them?
- Download the Tooltips, here.
- Upload the Javascript file you just downloaded to your server.
- Add some CSS to your HTML document.
Here’s a sample:<style type=”text/css”>
#tooltip {
background: #FFF;
color: #06c;
height: 26px;
width: 200px;
position: absolute;
left: 0px;
top: 0px;
display: none;
font-size: 12px;
border: 1px solid #06c;
padding: 10px 0px 0px 0px;
text-align:center;
}
</style> - Link the file in the <Head> section of your HTML document.
Heres a sample:<script type=”text/javascript” src=”tooltip.js”/>
- and you’re done. Congrats!
Enjoy, and let me know if you like it.
Tags: Development, Holtkamp_Projects, javascript, project, projects, System, Tooltip
