Tutaj
mój kod html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> window.addEvent('domready', function(){ /* 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' }); }); </script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h3> Tips 1 "Tips Title :: This is my tip content" /> <h3> Tips 2 "Tips Title :: This is my tip content" /> <h3> Tips 3 "Mootools official website">Mootools.net</a> <h3> Tips 4 "Mootools official website">Mootools.net</a> </body> </html>
kod css
.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; }
i efekt nie wyszedł
Czy może ktoś powiedzieć dlaczego
Czego nie dodałem ?