[RESOLVED] Two Different Classes with Mootools Tooltip

Hello,

I’m trying to use Mootools Tooltip, which includes the following code:

[url]http://demos111.mootools.net/Tips[/url]

It’s pretty straight-forward. The main customization I do is setting the width of the hover box in CSS.

However, I’m trying to use Tips in the same website, but I want two different widths.

So one where the css would look like the normal default settings:

[CODE]
.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;
}
[/CODE]

And then another where I want to set just the width to a different setting for a new class:

[CODE]
.tool-tip2 {
color: #fff;
width: 39px; // here
z-index: 13000;
}
.custom-tip2 {
color: #000;
width: 30px; // and here
z-index: 13000;
}
[/CODE]

But as I understand it, the Mootools .js file is only set for tool-tip and custom-tip, not for tool-tip2 and custom-tip2. I’m not sure where to find this, and I’m not sure how to change it to include the second class either.

I’m afraid I’m quite a noob in Javascript. Been trying to find an answer on google for a while now, but haven’t been able to come up with anything yet =/.

Any help would be greatly appreciated!!

Also in #JavaScript _↴