HUH? Tooltip
The idea here is that you only have to add an anchor with the attribute huh='whatever' and with a little jquery and css an instant tooltip would be added.
This would be meant for people who don't have a lot of knowledge of html/css/js etc. who are working with template-style html (such as bloggers, wordpress users, or CMS user)
Haven't spent a lot of time on this, you'll see on the link...
If something does come out of this I'll be putting it on a webpage on my website when it launches, with the open-source code, and possibly different styles for the css!
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!ATTLIST a huh CDATA #IMPLIED>
<a huh='Huh? Tooltip'>Text</a>
CSS
.huh {
max-width: 200px;
min-width: 50px;
min-height: 30px;
}
.huh-arrow {
height: 5px;
width: 9px;
position: relative;
margin: auto;
background: url(http://jaco.jamesrossini.com/images/huh/up.gif) no-repeat center center;
}
.huh-box {
text-overflow: ellipsis;
padding: 5px;
font-size: 10px;
line-height: 10px;
background: #000;
background: rgba(0,0,0,0.8);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}
JavaScript
$('document').ready(function() {
$('a').attr('href') {
//adds huh? tooltip (.huh) with huh arrow (.huh-arrow) and box (.huh-box)
};
});