Define a bounding box for overlay other than documentElement
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Please describe the feature you would like to request.
I would like the ability to define a bounding area where the tooltip is constrained to. Currently, the overlay bounding box is set to top: 0px; left: 0px; height: 100%; width: 100% but I would like to define these programmatically or pass an element ref to use as a template for the bounding box calculation. I know I can add a class to the overlay to change this but it has to be dynamic and respond to resizing an element whose size represents what the overlay bounds should be.
#### What is the use-case or motivation for this proposal?
The app has a requirement to restrict the tooltip location over a certain area and not allow it to overflow over surrounding elements. For example, using a tooltip to provide more detail over a chart cursor but the tooltip should be constrained to just the chart area.
This isn't the exact scenario but you can see the tooltip overflows the mat-card area here. I want to be able to push the tooltip into the mat-card area.
https://stackblitz.com/edit/angular6-material-components-demo-overlay-container
#### Is there anything else we should know?
Angular 7.2.4
Material 7.2.1
In FlexibleConnectedPositionStrategy, perhaps there could be an optional sizingEl property to use other than the documentElement. I haven't been able to test this since it's not extendable.
```
withSizingElement(sizingElement: HTMLElement): this {
this._sizingEl = sizingElement;
return this;
}
private _getNarrowedViewportRect(): ClientRect {
const el = this._sizingEl || this._document.documentElement;
const width = el!.clientWidth;
const height = el!.clientHeight;
...
}
```
Something similar will have to be done to get the top and left from the sizing element:
```
getScrollPosition(referenceElement?: HTMLElement): ScrollPosition {
if (!this._platform.isBrowser) {
return {top: 0, left: 0};
}
const el = referenceElement || document.documentElement!;
const rect = el.getBoundingClientRect();
const top = -rect.top || el.scrollTop || 0;
const left = -rect.left || el.scrollLeft || 0;
return {top, left};
}
```
Contributor guide
Research direction
Start by reading FlexibleConnectedPositionStrategy, especially _getNarrowedViewportRect and getScrollPosition, to understand how the current documentElement bounds are calculated. Define the behavior for a supplied sizing element, including its position and resizing, and verify that tooltips remain constrained to the requested chart or mat-card area.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100