In this file, the layout structure of a coolTip popup is explained. This structure is shown schematically in the following figure and differs dramatically from earlier versions of coolTip, as well as from its parent overLIB, which used internal tables. As illustrated in the figure, each coolTip contains one or two div containers. If there is caption content, including close text and/or image, then it is placed in the first div container with a span element, floated right within it, to hold the close text and/or image. The next div container holds the main body text. Border styling is applied to the containing element, normally ctDiv, of coolTip.
Schematic representation of popup layout
Although almost any type of style rule can be applied
to the ctDiv container, I envision that it will
contain a background color and a border style of some sort
and not much else. If you don't apply any background color
to the inner-most div elements, the background color of
the outer ctDiv container will show through. In this way, more border styles than
just a plain solid border, such as dashed, dotted, double, groove, inset, outset,
and ridge, which all newer browsers
now support can be applied. In addition, shadows and rounded corners of the CSS3 specification can also be applied. Note that if padding is applied to this containing div element, the popup will show a border with the caption and body text standing apart from the border, with the backround color of this div showing through. Therefore, no padding should be applied. |