Hi, I have this tooltip and need to have two differnet width tooltips on the same page. Whatever I have tried has failed.

Code:
<a onmouseover="doTooltip(event,'<div class=&quot;tp2&quot;><img src=&quot;xx&quot; alt=&quot;xx&quot; border=&quot;0&quot;></div>' )" onmouseout="hideTip()" href="http://xx" onclick="this.target='blank'">
The css for the div is as follows

Code:
div#tipDiv { 
position : absolute;
visibility : hidden;
left : 0;
top : 0;
z-index : 10000;
background-color : #efefef;
border : 1px solid #336;
padding : 9px;
color : #000;
font-size : 12px;
line-height : 1.2;
width : 180px;text-align : left;
} 
div.tp2 { 
font-family : Arial, Verdana, helvetica, sans-serif;
font-size : 12px;
color : #000;
background-color : #efefef;
padding-top : 9px;
text-align : left;
width : 300px;
}

If I declare a new div.tp3 for example it only superficially styles the tooltip but defers to the main div#tipDiv for its size and ignores any width declaration. In the tooltip .js there defines the tipID. I wonder is it here that you can define another ID which you can style differently

Code:
var Tooltip = {
    followMouse: false,
    offX: 8,
    offY: 12,
    tipID: "tipDiv",
    showDelay: 100,
    hideDelay: 200,

Any help would be most apprciated.
Thanks
Richard