Tooltip: make pointer align with text

[bill]

A tooltip next to text looks too high:

The center of the pointer should align w/the center of the text.

Need to be careful with this one because it could cause the top or the bottom of the tooltip to go offscreen, if the target text is near the top or the bottom of the viewport.

Also need to define the spec exactly... is the arrow vertically in the middle of the bubble? Currently it's towards the bottom.

Taken from ​IBM Design Leadership recommendations.

[bill]

(In [13430]) Tooltip look and feel updates:

• remove matte from GIF images so they look OK on dark background (refs #6558) (Note: The images should be cropped but I had some problems doing that so leaving that for a different checkin.)
• move connector gif down a bit so it aligns better w/<input> or <span> nodes (refs #6559)
• add rounded corners for FF3 but make both FF3 and safari rounding smaller so text doesn't get cutoff, and so connector gif can be moved down (see previous bullet point)
• also fix a problem with IE6 and IE7 above-tooltip displaying incorrectly (regression from [13385], refs #6558)

[bill]

The workaround to this issue is to use above/below tooltips instead.

[bill]

See also #4997.

[bill]

Unlike #4997, this requires vertical middle alignment support in dijit.place, maybe support CL/CR in addition to TL/BL/TR/BR for the alignment parameter. (C == center.)

[bill]

(In [22995]) Always vertically center the arrow with the around node, rather than just when it doesn't point at the around node. This fixes the test failures on FF/mac which were due to special code for having the arrow 3px above the bottom of the tooltip. Refs #4997 !strict.

This also makes the arrow align better with small around nodes (fixes #6559), although I think the ideal fix would still be to vertically center the entire tooltip with the around node.

Patch from Katie (IBM, CCLA), thanks!

[bill]

more or less aligned after [22995]

[bill]

Here's how it looks after [22995], and also I think the arrow got smaller in claro:

So even for plain text (which is vertically short), the arrow looks aligned.