Facebook style tooltip
Thanks to David Walsh
HTML
<div id="content">
copse <span class="helplabel">wtf?</span>
<div class="description">
Copse is derived from the Old French word copeiz meaning “a cut-over forest” which originates in the Latin word colpaticum meaning “having been cut.”
</div>
</div>
CSS
body{
font:.85em/1.5em 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;
/*background:#f7f7f7 url(../images/background.jpg) repeat-y;*/
background-color:#f7f7f7;
}
#content{
padding:30px;
}
.helplabel {
background-color: #AEAEAE;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
font-size: 9.75px;
text-shadow: none;
font-weight: bold;
padding: 1px 3px 2px;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
}
.hidden{
display:none;
visibility:hidden;
}
/*Thanks facebook*/
.uiContextualDialogPositioner, .uiContextualDialogPositioner .uiContextualDialog {
position: absolute;
z-index: 200;
}
.uiContextualDialogLeft .uiContextualDialog {
right: 0;
}
.uiOverlayArrowRight {
padding-right: 10px;
}
.uiOverlayArrowLeft {
padding-left: 10px;
}
.uiOverlayArrowTop {
padding-top: 10px;
}
.uiOverlayArrowBottom {
padding-bottom: 10px;
}
.uiOverlay {
position: relative;
z-index: 200;
}
.uiContextualDialog, .uiContextualDialog:focus {
outline: 0 solid transparent;
}
.uiOverlayContent {
background: white;
border: 1px solid #8C8C8C;
border: 1px solid rgba(0, 0, 0, .45);
border-bottom: 1px solid #666;
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
position: relative;
}
.uiOverlayContentHolder {
padding: 10px;
}
.uiOverlayArrow {
position: absolute;
overflow: hidden;
}
.uiOverlayArrowRight .uiOverlayArrow {
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
background-position: -179px -64px;
height: 16px;
right: 2px;
width: 9px;
}
.uiOverlayArrowLeft .uiOverlayArrow {
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
background-position: -486px -94px;
height: 16px;
left: 2px;
width: 9px;
}
JavaScript
var toolHelp = new Class({
Implements: [Options,Events],
options: {
container: document.body,
helpElement: 'span',
helpClass: 'helplabel',
descriptionElement: 'div',
descriptionClass: 'description',
hideClass:'hidden',
width: 'auto',
height: 'auto',
xOffset: 5,
yOffset: 5,
fadeDelay: 400,
fadeDuration: 400,
zIndex: 9001/*,
onOpen: $empty,
onClose: $empty
*/
},
initialize: function(options){
this.setOptions(options);
this.descriptions = $(this.options.container).getElements(this.options.descriptionElement+'.'+this.options.descriptionClass);
this.tooltips = [];
this.attach();
},
attach: function(){
//create main box
this.box = new Element('div',{
'class': 'uiContextualDialogPositioner uiContextualDialogRight',
styles: {
'z-index': this.options.zIndex,
opacity: 0,
top: -9000,
left: -9000
},
tween: {
duration: this.options.fadeDuration,
onComplete: function() {
if(this.box.getStyle('opacity') == 0) {
this.box.setStyles({ top: -9000, left: -9000 });
}
}.bind(this)
}
}).inject(document.body,'bottom');
this.positioner = new Element('div',{
'class': 'uiOverlay uiContextualDialog uiOverlayArrowLeft',
styles: {
width: this.options.width,
heigth: this.options.width
},
}).inject(this.box);
this.contholder = new Element('div',{'class': 'uiOverlayContent'}).inject(this.positioner);
this.tipArrow = new Element('div',{'class': 'uiOverlayArrow','style':'top: 15px; margin-top:...