JavaScript Tooltips für MooTools

JavaScript - Tooltip für MooTools

CSS für den Tooltip

<style type="text/css">
/*tooltip*/
div.tooltip {
width: 200px;
color: #fff;
text-align: center;
}
div.tooltip h4 {
color: #fff;
font-weight: bold;
text-shadow: 2px 2px 1px #222;
margin: 0;
padding: 13px 10px 5px;
background: url(balloon.png) top left no-repeat !important;
background: url(balloon.gif) top left no-repeat;
font-size: 11px;
}
div.tooltip p {
margin: 0;
padding: 0 10px 15px;
text-shadow: 2px 2px 1px #222;
background: url(balloon.png) bottom left no-repeat !important;
background: url(balloon.gif) bottom left no-repeat;
font-size: 10px;
}
</style>

Tooltip PNG Bild Download

Tooltip Gif Bild Download

<script type="text/javascript">
window.onload=function()
{
/* setup tooltips */
var as = [];
$S('a').each(function(a){
if (a.getAttribute('title')) as.push(a);
});
new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25});
}
</script>

 

Mootools Download

 

gefunden bei http://www.chrisesler.com/