diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md index 1d71ceeb..c2ecc040 100644 --- a/docs/components/tooltip.md +++ b/docs/components/tooltip.md @@ -174,4 +174,29 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design ``` +### Hoisting + +Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details. + +```html preview +
+ + No Hoist + + + + Hoist + +
+ + +``` + [component-metadata:sl-tooltip] diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts index 84b67d77..fcebb9c4 100644 --- a/src/components/tooltip/tooltip.ts +++ b/src/components/tooltip/tooltip.ts @@ -83,6 +83,12 @@ export default class SlTooltip extends LitElement { */ @property() trigger = 'hover focus'; + /** + * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with + * `overflow: auto|hidden|scroll`. + */ + @property({ type: Boolean }) hoist = false; + connectedCallback() { super.connectedCallback(); this.handleBlur = this.handleBlur.bind(this); @@ -216,7 +222,7 @@ export default class SlTooltip extends LitElement { this.popover = createPopper(this.target, this.positioner, { placement: this.placement, - strategy: 'absolute', + strategy: this.hoist ? 'fixed' : 'absolute', modifiers: [ { name: 'flip', @@ -258,6 +264,7 @@ export default class SlTooltip extends LitElement { @watch('placement') @watch('distance') @watch('skidding') + @watch('hoist') handleOptionsChange() { this.syncOptions(); } @@ -290,7 +297,7 @@ export default class SlTooltip extends LitElement { if (this.popover) { this.popover.setOptions({ placement: this.placement, - strategy: 'absolute', + strategy: this.hoist ? 'fixed' : 'absolute', modifiers: [ { name: 'flip',