Opened 12 years ago

Closed 9 years ago

Last modified 8 years ago

#4997 closed defect (fixed)

Tooltip: incorrect position of tooltip arrow for large tooltips

Reported by: guest Owned by:
Priority: high Milestone: 1.6
Component: Dijit Version: 1.0
Keywords: tooltip arrow tip Cc:
Blocked By: Blocking:

Description (last modified by bill)

I have a widget (Button) with a Tooltip. This tooltip shows an image so tooltip size can be quite big. When the tooltip doesn't have enough space next to the hosting widget (Button in my case), the tooltip is displayed but its "arrow" is not pointing to the Button widget:

The tooltip arrow is marked by red circle and ideally it should point to the button at the top of this image.

Attachments (1)

Dojo-1-0-0-RC1-Tooltip.png (14.2 KB) - added by guest 12 years ago.

Download all attachments as: .zip

Change History (14)

Changed 12 years ago by guest

Attachment: Dojo-1-0-0-RC1-Tooltip.png added

comment:1 Changed 12 years ago by guest

I forgot to add that I noticed the same problem in the following releases:

  • Dojo 1.0.0.Beta (released on Oct-24-2007);
  • Dojo 1.0.0.RC1 (released on Nov-02-2007);

Both, the Button and its Tooltip were created programmatically.

The code was tested on WinXP and MSIE6/SP2 (screenshot is also attached).

comment:2 Changed 11 years ago by bill

Milestone: 2.0
Summary: Incorrect position of Tooltip arrowIncorrect position of Tooltip arrow for large tooltips

In the trunk version of the code I've added options to control where the tooltip is placed.. in your case you could set the option to "below, above". That might help. But still, I can imagine there would still be a problem.

comment:3 Changed 11 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

comment:4 Changed 11 years ago by bill

Milestone: 1.31.4

See also #4282.

comment:5 Changed 11 years ago by bill

Milestone: 1.4future

comment:6 Changed 10 years ago by bill

Summary: Incorrect position of Tooltip arrow for large tooltipsTooltip: incorrect position of tooltip arrow for large tooltips

See also #6559.

comment:7 Changed 10 years ago by bill

Description: modified (diff)

Would be nice to have this feature, although it seems difficult.

Probably in general, the ideal design is to vertically center both the tooltip and the tooltip arrow with the around-node. However, as the screenshot demonstrates, for large tooltips (or small viewports) both the tooltip text and the arrow need to be positioned programatically, to avoid going out of the viewport.

comment:8 Changed 9 years ago by bill

Milestone: future1.6

comment:9 Changed 9 years ago by bill

Resolution: fixed
Status: newclosed

(In [22969]) Tooltip positioning fixes:

  • Before positioning tooltip, limit tooltip's width to available width between the around node and the edge of the viewport. Reducing a tooltip's width (for tooltips with flowing text) will increase the tooltip's height, which affects vertical placement.
  • Position tooltip connector arrow to line up with the around node, even when tooltip (due to a large tooltip size/small viewport size) extends both above and below the around node.
  • Fix problem with tooltip placement when clicking a TextBox causes it to scroll into view simultaneously with displaying a tooltip.

Note: To determine the "natural" width of a toolip, had to remove left:50% setting for offscreen tooltips, because offscreen tooltips still get limited in width to the edge of the viewport. That CSS was apparently to work around a bug in an old browser (but no longer happens in the browsers we support).

Patch from Katie Vance (IBM, CCLA), thanks!

Fixes #4997, #4282 !strict.

Known issues: regression test failing by a few pixels on Mac FF (but working on Windows FF).

comment:10 Changed 9 years ago by 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!

comment:11 Changed 8 years ago by bill

(In [23289]) Robot isn't necessary for running the tooltip positioning tests, merging tests/robot/Tooltip_placement.html and tests/test_Tooltip_placement.html into tests/Tooltip-placement.html

Tests could probably be further simplified, for example we don't really need to use a ValidationTextBox.

Refs #4997.

comment:12 Changed 8 years ago by bill

(In [23520]) Don't let bottom of tooltip connector extend past bottom of tooltip content, as it makes the tooltip look broken. Problem occurred with <14px tall aroundNodes such as points on charts.

Would be better to center the tooltip content relative to the center of the aroundNode, rather than the current behavior where their bottoms are aligned. With this checkin, for small aroundNodes (such as points on charts) the connector doesn't quite vertically align with the aroundNode.

Refs #4282, #4997, [23512], !strict.

comment:13 Changed 8 years ago by bill

(In [23531]) Don't let top of tooltip connector extend past top of tooltip content, as it makes the tooltip look broken. Problem occurred with large aroundNodes such as the bubble charts in dojox/charting/tests/test_event2d.html.

Refs #4282, #4997, [23512], !strict.

Note: See TracTickets for help on using tickets.