Opened 11 years ago

Closed 9 years ago

Last modified 9 years ago

#6559 closed task (fixed)

Tooltip: make pointer align with text

Reported by: bill Owned by: bill
Priority: high Milestone: 1.6
Component: Dijit - LnF Version: 1.1.0
Keywords: ibm Cc:
Blocked By: Blocking:

Description

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.

Attachments (2)

tooltip.gif (3.6 KB) - added by bill 11 years ago.
newArrowPos.gif (10.3 KB) - added by bill 9 years ago.
more or less aligned after [22995]

Download all attachments as: .zip

Change History (8)

Changed 11 years ago by bill

Attachment: tooltip.gif added

comment:1 Changed 11 years ago by 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)

comment:2 Changed 11 years ago by bill

Milestone: 1.4future

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

comment:3 Changed 11 years ago by bill

See also #4997.

comment:4 Changed 9 years ago by 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.)

comment:5 Changed 9 years ago by bill

Resolution: fixed
Status: newclosed

(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!

Changed 9 years ago by bill

Attachment: newArrowPos.gif added

more or less aligned after [22995]

comment:6 Changed 9 years ago by bill

Milestone: future1.6

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

more or less aligned after [22995]

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

Note: See TracTickets for help on using tickets.