Skip to content

Commit

Permalink
Place tooltip above chart on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
envex committed Dec 16, 2024
1 parent 5c8bc0f commit 31ba78e
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 14 deletions.
1 change: 1 addition & 0 deletions packages/polaris-viz/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
### Changed

- Changed `<LineChart />` tooltip positioning to align with the crosshair when on a touch device.
- Changed `<BarChart />` tooltip positioning to align with the top of the chart on a touch device.

## [15.3.5] - 2024-12-05

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,20 @@ export function getAlteredVerticalBarPosition(
//
// Y POSITIONING
//
if (!props.isPerformanceImpacted) {
if (props.isPerformanceImpacted || props.isTouchDevice) {
y = clamp({
amount:
props.containerBounds.y -
props.tooltipDimensions.height -
(scrollContainer?.scrollTop ?? 0),
min: 0,
max:
window.scrollY +
window.innerHeight -
props.tooltipDimensions.height -
TOOLTIP_MARGIN,
});
} else {
if (newPosition.vertical === TooltipVerticalOffset.Inline) {
newPosition.horizontal = TooltipHorizontalOffset.Left;

Expand Down Expand Up @@ -60,19 +73,6 @@ export function getAlteredVerticalBarPosition(
newPosition.horizontal = TooltipHorizontalOffset.Left;
}
}
} else {
y = clamp({
amount:
(props.chartBounds.y ?? 0) -
props.tooltipDimensions.height -
(scrollContainer?.scrollTop ?? 0),
min: 0,
max:
window.scrollY +
window.innerHeight -
props.tooltipDimensions.height -
TOOLTIP_MARGIN,
});
}

//
Expand Down

0 comments on commit 31ba78e

Please sign in to comment.