How to use CSS with tooltips

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:08

How to use CSS with tooltips

Poster: galneweinhaw
Dated: Thursday April 6 2006 - 4:42:21 BST

How do I use CSS with the tooltips?

Thanks!

Poster: vikenk
Dated: Friday April 7 2006 - 14:12:01 BST

Hello,

Sorry it took me so long to reply, but I have been busy with other things in my life :>)

As for tooltips and CSS: I don't see why you can'y implement it the same way as you do with the menu. The toolips.js module has a style section just like the regular menu. Here's what mine looks like:

Code:

with(M_toolTipStyle=new mm_style()){
    offbgcolor = "#000000";
      offcolor = "#ff9000";
   bordercolor = "#ff9000";
   borderstyle = "solid";
       padding = 1
   borderwidth = 1
      fontsize = "10pt";
     fontstyle = "normal";
    fontfamily = "arial, verdana";
     itemwidth = 200;
         align = "center";
    overfilter = "Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
}

You could creste a class in your stylesheet and apply it the same way:

Code:

.tooltip table {
  width: whatever;
  font-family: whatever;
  border: whatever;
}

Then apply it to the style. In theory, it should work just like the menu. See the first two lines in the next example:

Code:

with(M_toolTipStyle=new mm_style()){
       onclass = "tooltip";
      offclass = "tooltip";  
    offbgcolor = "#000000";
      offcolor = "#ff9000";
   bordercolor = "#ff9000";
   borderstyle = "solid";
       padding = 1
   borderwidth = 1
      fontsize = "10pt";
     fontstyle = "normal";
    fontfamily = "arial, verdana";
     itemwidth = 200;
         align = "center";
    overfilter = "Fade(duration=0.2);Shadow(color='#777777', Direction=135, Strength=5)"
}

Try it and let us know if it works.

Poster: galneweinhaw
Dated: Thursday April 27 2006 - 7:28:23 BST

btw, thanks for the help. this worked pretty well.

This is what I ended up doing (got rid of alot of headaches =)

stylesheet:

Code:

.tooltip * {
         padding: 0;
         margin: 0;
}

.tooltip td {
   border: 1px solid black; 
   padding: 5px;
   margin: 5px;
   font-size: 10pt; 
   font-family: Arial; 
   background-color: #F0E1C8; 
   }

tooltip.js

Code:

with(M_toolTipStyle=new mm_style()){
       onclass = "tooltip";
      offclass = "tooltip";
//    offbgcolor = "#F0E1C8";
//      offcolor = "#000000";
//   bordercolor = "#999999";
//   borderstyle = "solid";
//       padding = 1
//   borderwidth = 1
//      fontsize = "10px";
//     fontstyle = "normal";
//    fontfamily = "tahoma, verdana";
      
      outfilter="randomdissolve(duration=0.3)";
      overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
}
with(new menuname("M_toolTips"))
{
   top="offset=22"
   left="offset=10"
   style=M_toolTipStyle;
//   margin=4
   if(_W.M_maxTipWidth)maxwidth=M_maxTipWidth
   aI("text=;type=ToolTip;");
}

thanks again!

Industrial Strength JavaScript and DHTML Menus

How to use CSS with tooltips