diff -r 9859c4bae904 -r f9d51dd4a3fe src/widgets/Tooltip.css --- a/src/widgets/Tooltip.css Fri Nov 30 10:49:26 2012 +0100 +++ b/src/widgets/Tooltip.css Wed Dec 19 19:02:52 2012 +0100 @@ -1,31 +1,119 @@ -/* ToolTip Widget */ +.Ldt-Tooltip { + position: absolute; + height: 0; width: 0; + z-index: 100000; +} + +.Ldt-Tooltip-Main { + position: absolute; bottom: 0; left: -96px; +} + +.Ldt-Tooltip-Corner-NW, +.Ldt-Tooltip-Corner-NE, +.Ldt-Tooltip-Corner-SW, +.Ldt-Tooltip-Corner-SE { + position: absolute; width: 6px; height: 6px; background: url(img/tooltip-corners.png); +} + +.Ldt-Tooltip-Corner-NW, +.Ldt-Tooltip-Corner-SW { + left: 0; +} + +.Ldt-Tooltip-Corner-NE, +.Ldt-Tooltip-Corner-SE { + right: 0; +} + +.Ldt-Tooltip-Corner-NW, +.Ldt-Tooltip-Corner-NE { + top: 0; +} + +.Ldt-Tooltip-Corner-SW, +.Ldt-Tooltip-Corner-SE { + bottom: 10px; +} + +.Ldt-Tooltip-Corner-NW { + background-position: top left; +} + +.Ldt-Tooltip-Corner-NE { + background-position: top right; +} -.Ldt-Tooltip { - position: absolute; - z-index: 10000000000; - background: transparent url("img/white_arrow_long.png"); - font-size: 12px; - padding: 15px 15px 20px; - color: black; - font-family: Arial, Helvetica, sans-serif; - overflow:hidden; +.Ldt-Tooltip-Corner-SW { + background-position: bottom left; +} + +.Ldt-Tooltip-Corner-SE { + background-position: bottom right; +} + +.Ldt-Tooltip-Border-Top, +.Ldt-Tooltip-Border-SW, +.Ldt-Tooltip-Border-SE { + position: absolute; height: 6px; background: url(img/tooltip-h-borders.png); +} + +.Ldt-Tooltip-Border-Top { + left: 6px; right: 6px; +} + +.Ldt-Tooltip-Border-SW, +.Ldt-Tooltip-Border-SE { + bottom: 10px; background-position: bottom; +} + +.Ldt-Tooltip-Border-SW { + left: 6px; +} + +.Ldt-Tooltip-Border-SE { + right: 6px; +} + +.Ldt-Tooltip-Tip { + position: absolute; height: 16px; width: 22px; + background: url(img/tooltip-tip.png); + bottom: 0; +} + +.Ldt-Tooltip-Border-Left, +.Ldt-Tooltip-Border-Right { + position: absolute; width: 6px; background: url(img/tooltip-v-borders.png); + top: 6px; bottom: 16px; +} + +.Ldt-Tooltip-Border-Left { + left: 0; background-position: left; +} + +.Ldt-Tooltip-Border-Right { + right: 0; background-position: right; } .Ldt-Tooltip-Inner { - height: 115px; + min-height: 30px; + max-height: 140px; width: 180px; overflow: hidden; + margin: 6px 6px 16px; + background: url(img/tooltip-gradient.png) bottom; } + .Ldt-Tooltip-Color { - float: left; margin: 2px 4px 2px 0; width: 10px; height: 10px; + float: left; margin: 8px 2px 2px 8px; width: 10px; height: 10px; } .Ldt-Tooltip img { - max-width: 140px; max-height: 70px; margin: 0 20px; + max-width: 140px; max-height: 80px; margin: 2px 20px; } .Ldt-Tooltip p { - margin: 2px 0; - font-size: 12px; -} + margin: 6px 8px; + font-size: 12px; + line-height: 14px; +} \ No newline at end of file