Question

I’ve been trying awhile to implement this mootools tooltip sample on my site, the problem is I am using mootools 1.4 (mootools-core-1.4.1-full-compat.js) and the example using classname i.e.

var Tips4 = new Tips($$('.Tips4'), {
    className: 'custom'
});

won’t work for me. I can see the text but no image, firebug net tab doesn’t show any asset missing.

I do have the effect I want using the other samples on the page but as far i can tell this locks me into a single style for tooltips.

 var Tips1 = new Tips($$('.Tips1'));

which then has the css setup like so

.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;
}

If custom class method won’t work in 1.4

Am i correct in assuming using this 2nd method I cant have 2 separate tooltip styles on the page? In effect the .tool-* styles are reserved? I’ve tried something like

.MyOtherTipStyle .tool-title
{
 //etc
}
.MyOtherTipStyle .tool-text
{
 //etc
}

but irrespective of class assigned the same

.tool-title
.tool-text  

styles are only ever applied.

Thanks,

Answer 1

The demo seems to use a different version of Mootools More, here is the right way to make your css (1.4.2):

.custom { }
  .custom .tip-top { }
  .custom .tip { }
    .custom .tip-title { }
    .custom .tip-text { }
  .custom .tip-bottom { }

Here is an updated version of your JSFiddle, using the previous format: http://jsfiddle.net/3By77/4/.

Additionally, you forgot to activate Mootools More in JSFiddle, that’s why it didn’t work.