tooltip

[sandy1028]

hi,

 

How to insert the tooltip information when mouse over the details of the table

[ToonMariner]

well - a tags have this with the title tag... the image tag has alt tag...

 

most browsers will display this when the mouse stays of the element for a while....

 

If you want other tags to do the same and especially if you don't want the delay then you are in the realms of javascript...

[sandy1028]

I have added a tooltip in this way...

How do I print the tool tip information on large background and in multi line

 

<style type="text/css">
.ToolText{position:absolute; }
.ToolTextHover{position:absolute;}
.ToolText span{display: none;}

.ToolTextHover span{
display: block;
  z-index: 100;
  position: absolute;
  top: 2.5em;
  left: 0;
  width: auto;
  line-height: 1.2em;
  padding: 3px 7px 4px 6px;
  border: 1px solid #336;
  background-color: #f7f7ee;
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #000;
  text-align: left;
}
</style>
<?
$lines = file('phonedb.txt');
foreach($lines as $line)
{
        $text_line=explode(":",$line);

}
$tool=$text_line[0].$text_line[1].$text_line[2].$text_line[3].$text_line[4].$text_line[5];
echo "<p class=\"ToolText\" onMouseOver=\"javascript:this.className='ToolTextHover'\" onMouseOut=\"javascript:this.className='ToolText'\">--$text_line[0]";



echo "<span>$tool</span></p>";
?>

 

[ToonMariner]

Apologies brain not on this morning - yes it can be done with just css!

 

well first give the tooltip box a finitie width that way it will make multi lines out of long strings...

 

Not quite sure you mean by 'How do I print the tool tip information on large background' if you mean you have a background image for your tool-tip container then give the tool-tip box a background-image: url(rel/path/to/im);

[sandy1028]

z-index: 100;
  position: absolute;
  top: 2.5em;
  left: 50px;
  width: 30px;
  line-height: 20px;
  padding: 3px 7px 4px 6px;
  border: 1px solid #336;
  background-image: url(bt.gif);
  font-family: arial, helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #000;
  text-align: left;
text-indent: 12px;
}

 

 

 

I have set the background image. How to insert the exact width and heigth of the image.

Some text are outside the image and it is inside the border which is set.

 

[ToonMariner]

once you use a background image then image dimensions are not managed the same way...

 

best give your tooltip div a fixed width.  You can also use a fixed height but make sure you set over-flow: auto; and account for the scrollbar (not ideal but it will keep your tool-tip to the image size.