Tips
Tips demo
docs referencesjs code | html code | css code
References to Documentation
/* Tips 1 */ var Tips1 = new Tips($$('.Tips1')); /* Tips 2 */ var Tips2 = new Tips($$('.Tips2'), { initialize:function(){ this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0); }, onShow: function(toolTip) { this.fx.start(1); }, onHide: function(toolTip) { this.fx.start(0); } }); /* Tips 3 */ var Tips3 = new Tips($$('.Tips3'), { showDelay: 400, hideDelay: 400, fixed: true }); /* Tips 4 */ var Tips4 = new Tips($$('.Tips4'), { className: 'custom' });
<h3>Tips 1</h3> <img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips1" title="Tips Title :: This is my tip content" /> <h3>Tips 2</h3> <img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips2" title="Tips Title :: This is my tip content" /> <h3>Tips 3</h3> Fixed tooltip: <a href="http://www.mootools.net" onclick="return false;" class="Tips3" title="Mootools official website">Mootools.net</a> <h3>Tips 4</h3> Custom className: <a href="http://www.mootools.net" onclick="return false;" class="Tips4" title="Mootools official website">Mootools.net</a>
.tool-tip { color: #fff; width: 139px; z-index: 13000; } .tool-title { font-weight: bold; font-size: 11px; margin: 0; color: #9FD4FF; padding: 8px 8px 4px; background: url(bubble.png) top left; } .tool-text { font-size: 11px; padding: 4px 8px 8px; background: url(bubble.png) bottom right; } .custom-tip { color: #000; width: 130px; z-index: 13000; } .custom-title { font-weight: bold; font-size: 11px; margin: 0; color: #3E4F14; padding: 8px 8px 4px; background: #C3DF7D; border-bottom: 1px solid #B5CF74; } .custom-text { font-size: 11px; padding: 4px 8px 8px; background: #CFDFA7; }