create different width tooltips on same page

[rich1234]

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


<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


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


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


Any help would be most apprciated.
Thanks
Richard