Javascript tips 'pop-up' not formating properly

[Katie6]

Hi there,

I have copied a help-tips code from Mootools. When you hover over an image it fades in to give a tip (for demo, see:

http://demos.mootools.net/Tips

)

I have pasted into my code something which I think is identical to the code on Mootools, but the little tips box that comes up when I hover over the image isn't fomatted nicely (i.e. a nice black background and attractive font). Instead, a standard, ugly box comes up.

**************************************************
Here is exactly what I pasted into my html code:

<ol start="2"><li>This is a question<img src="question_mark.jpg" alt="help" class="Tips2" title="this is the help tip" /></li> </ol>


***************************************************
In the javascript bit I put:

<script language="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>

**************************************************
In the CSS file I put:

.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
background: #000;
}

.tool-title {
font-weight: bold;
font-size: 1em;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}

.tool-text {
font-size: 1em;
padding: 4px 8px 8px;
background-color: #000;
}

.custom-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom-title {
font-weight: bold;
font-size: 1em;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom-text {
font-size: 11px;
padding: 4px 8px 8px;

**************************************************

Could anyone kindly help me achieve the same pop-up tip as they do on Mootools. Mine doesn't seem to be picking up any CSS. I am a complete beginner when it comes to javascript!

Many thanks,

Katie

 

[BabyJeffy]

Does your page validate against the doctype you have selected?

Any markup errors will show when you go to validate.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

Did you also save the PNG images that they use?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Katie,

Did you resolve your problem? Had you saved the PNG images?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]