Tooltips...

[Mickword]

hey right so I am making tooltips, and I need it too look like this:



but when ever i do it, it looks like this:



So basically I need the edges to curve. and a 2 pixel padding thing. heres the code for it:

<script language="JavaScript1.2" type="text/javascript" src="img/menu/mm_menu.js"></script>
<style type="text/css">

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid #666666;
padding: 4px;
background-color: white;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -100px;
z-index: 100;
visibility: hidden;
}

</style>

[LMS16]

if its not needed to expand use

background: url(link/toimage.png);

Lew,.

[Mickword]

Thanks but it didn't work.

[Joe!]

border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;

You can use these CSS properties to manipulate the rounding of the corners, hope this helps.

[Apolva]

If you need it to look just like your example picture, use 8 nested divs (each with no padding/margin) and set separate backgrounds on each one (eg. top left, top, top right)

[Moh]

If I was you, I'd just recode the html lol

[LMS16]

<script language="JavaScript1.2" type="text/javascript" src="img/menu/mm_menu.js"></script>
<style type="text/css">

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
height: 150px;
background: url(link/to/image.png) no-repeat;
border: 1px solid #666666;
padding: 4px;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progidXImageTransform.Microsoft.Shadow(color=gray,direct ion=135);
}

#dhtmlpointer{
position:absolute;
left: -100px;
z-index: 100;
visibility: hidden;
}

</style>

Try that

Lew.

[Mickword]

Ok, right most of that worked thanks. Thanks all.