Two differently styled rich HTML tooltips on one page?

[nevdev]

1) Script Title: Rich HTML Balloon Tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

3) Describe problem: Is it possible to have two differently styled tooltips on one page? I tried using two different variants of the .css sheet, but perhaps there can't be two instances of the .js file..? However, could something be modified in it - maybe the line:

document.getElementById(relvalue).className=="balloonstyle")? true : false

...so that it can refer to two or more styles?

Thank you.

[jscheuer1]

You do not need to modify the script. You do need a basic knowledge of css style. In the stylesheet, you see the balloonstyle class defined:


.balloonstyle{
position:absolute;
top: -500px;
left: 0;
padding: 5px;
visibility: hidden;
border:1px solid black;
font:normal 12px Verdana;
line-height: 18px;
z-index: 100;
background-color: white;
width: 200px;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
}

You may also (later on in the same stylesheet) define each individual tip by using its id, example for balloon1:


#balloon1 {
color:white;
background-color: black;
}

This will add to and/or change the styles provided for it by its class name. For more on css style see:

http://www.blooberry.com/indexdot/css/propindex/all.htm

or your favorite css reference.

[nevdev]

Thanks but I rather meant the attributes within this pre-defined class "balloonstyle", which is tied to the js. I have many divs with id's which are named dynamically by php - their number is unknown, plus I needed to create tooltips of different widths, so I needed to style the class "balloonstyle" directly. Maybe this is not feasible. However I think I can do it by turning my css sheet into a php document! Thanks!