feat: add hoist attribute for sl-tooltip (#565)

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]

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',