How to use CSS with tooltips

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
galneweinhaw
Advanced
Advanced
Posts: 10
Joined: Sat Apr 01, 2006 9:32 pm

How to use CSS with tooltips

Post by galneweinhaw »

How do I use CSS with the tooltips?

Thanks!
vikenk
Mega Advanced
Mega Advanced
Posts: 297
Joined: Tue Nov 29, 2005 7:38 pm

Post by vikenk »

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: Select all

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: Select all

.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: Select all

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.
galneweinhaw
Advanced
Advanced
Posts: 10
Joined: Sat Apr 01, 2006 9:32 pm

Post by galneweinhaw »

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

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

stylesheet:

Code: Select all

.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: Select all

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!
Post Reply