From 8ae753c396d7a901019d0cd5266f2ecbb24e0b52 Mon Sep 17 00:00:00 2001
From: Denis Korablev <timefordroids@users.noreply.github.com>
Date: Wed, 13 Oct 2021 16:29:38 +0400
Subject: [PATCH] feat: add hoist attribute for sl-tooltip (#565)

---
 docs/components/tooltip.md        | 25 +++++++++++++++++++++++++
 src/components/tooltip/tooltip.ts | 11 +++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

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
 </sl-tooltip>
 ```
 
+### 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
+<div class="tooltip-hoist">
+  <sl-tooltip content="This is a tooltip">
+    <sl-button>No Hoist</sl-button>
+  </sl-tooltip>
+
+  <sl-tooltip content="This is a tooltip" hoist>
+    <sl-button>Hoist</sl-button>
+  </sl-tooltip>
+</div>
+
+<style>
+  .tooltip-hoist {
+    border: solid 2px rgb(var(--sl-panel-border-color));
+    overflow: hidden;
+    padding: var(--sl-spacing-medium);
+    position: relative;
+  }
+</style>
+```
+
 [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',