Use positioner for tooltip

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Add `sl-format-bytes` utility component
 - Add `clearable` and `required` props to `sl-select`
 - Add `slClear` event to `sl-input`
+- Refactored `sl-dropdown` and `sl-tooltip` to use positioner elements so panels/tooltips can be customized easier
 - Fix incorrect `aria-selected` state in `sl-menu-item`
 
 ## 2.0.0-beta.15

src/components/tooltip/tooltip.scss

@@ -21,10 +21,13 @@
   display: contents;
 }
 
-.tooltip {
+.tooltip-positioner {
   position: absolute;
-  max-width: var(--max-width);
   z-index: var(--sl-z-index-tooltip);
+}
+
+.tooltip {
+  max-width: var(--max-width);
   border-radius: var(--sl-tooltip-border-radius);
   background-color: var(--sl-tooltip-background-color);
   font-family: var(--sl-tooltip-font-family);
@@ -33,7 +36,9 @@
   line-height: var(--sl-tooltip-line-height);
   color: var(--sl-tooltip-color);
   opacity: 0;
-  transition: var(--sl-transition-fast) opacity;
+  transform: scale(0.9);
+  transform-origin: bottom;
+  transition: var(--sl-transition-fast) opacity, var(--sl-transition-fast) transform;
   padding: var(--sl-tooltip-padding);
   pointer-events: none;
 
@@ -43,14 +48,15 @@
     width: 0;
     height: 0;
   }
+}
 
-  &.popover-visible {
-    opacity: 1;
-  }
+.popover-visible .tooltip {
+  opacity: 1;
+  transform: scale(1);
 }
 
 // Arrow + bottom
-.tooltip[data-popper-placement^='bottom']::after {
+.tooltip-positioner[data-popper-placement^='bottom'] .tooltip::after {
   bottom: 100%;
   left: calc(50% - var(--sl-tooltip-arrow-size));
   border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
@@ -58,17 +64,17 @@
   border-right: var(--sl-tooltip-arrow-size) solid transparent;
 }
 
-.tooltip[data-popper-placement='bottom-start']::after {
+.tooltip-positioner[data-popper-placement='bottom-start'] .tooltip::after {
   left: var(--sl-tooltip-arrow-start-end-offset);
 }
 
-.tooltip[data-popper-placement='bottom-end']::after {
+.tooltip-positioner[data-popper-placement='bottom-end'] .tooltip::after {
   right: var(--sl-tooltip-arrow-start-end-offset);
   left: auto;
 }
 
 // Arrow + top
-.tooltip[data-popper-placement^='top']::after {
+.tooltip-positioner[data-popper-placement^='top'] .tooltip::after {
   top: 100%;
   left: calc(50% - var(--sl-tooltip-arrow-size));
   border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
@@ -76,17 +82,17 @@
   border-right: var(--sl-tooltip-arrow-size) solid transparent;
 }
 
-.tooltip[data-popper-placement='top-start']::after {
+.tooltip-positioner[data-popper-placement='top-start'] .tooltip::after {
   left: var(--sl-tooltip-arrow-start-end-offset);
 }
 
-.tooltip[data-popper-placement='top-end']::after {
+.tooltip-positioner[data-popper-placement='top-end'] .tooltip::after {
   right: var(--sl-tooltip-arrow-start-end-offset);
   left: auto;
 }
 
 // Arrow + left
-.tooltip[data-popper-placement^='left']::after {
+.tooltip-positioner[data-popper-placement^='left'] .tooltip::after {
   top: calc(50% - var(--sl-tooltip-arrow-size));
   left: 100%;
   border-left: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
@@ -94,17 +100,17 @@
   border-bottom: var(--sl-tooltip-arrow-size) solid transparent;
 }
 
-.tooltip[data-popper-placement='left-start']::after {
+.tooltip-positioner[data-popper-placement='left-start'] .tooltip::after {
   top: var(--sl-tooltip-arrow-start-end-offset);
 }
 
-.tooltip[data-popper-placement='left-end']::after {
+.tooltip-positioner[data-popper-placement='left-end'] .tooltip::after {
   top: auto;
   bottom: var(--sl-tooltip-arrow-start-end-offset);
 }
 
 // Arrow + right
-.tooltip[data-popper-placement^='right']::after {
+.tooltip-positioner[data-popper-placement^='right'] .tooltip::after {
   top: calc(50% - var(--sl-tooltip-arrow-size));
   right: 100%;
   border-right: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
@@ -112,11 +118,11 @@
   border-bottom: var(--sl-tooltip-arrow-size) solid transparent;
 }
 
-.tooltip[data-popper-placement='right-start']::after {
+.tooltip-positioner[data-popper-placement='right-start'] .tooltip::after {
   top: var(--sl-tooltip-arrow-start-end-offset);
 }
 
-.tooltip[data-popper-placement='right-end']::after {
+.tooltip-positioner[data-popper-placement='right-end'] .tooltip::after {
   top: auto;
   bottom: var(--sl-tooltip-arrow-start-end-offset);
 }

src/components/tooltip/tooltip.tsx

@@ -21,6 +21,7 @@ export class Tooltip {
   componentId = `tooltip-${++id}`;
   isShowing = false;
   popover: Popover;
+  tooltipPositioner: HTMLElement;
   target: HTMLElement;
   tooltip: any;
 
@@ -96,7 +97,7 @@ export class Tooltip {
     const slot = this.host.shadowRoot.querySelector('slot');
 
     this.target = this.getTarget();
-    this.popover = new Popover(this.target, this.tooltip);
+    this.popover = new Popover(this.target, this.tooltipPositioner);
     this.syncOptions();
 
     this.host.addEventListener('blur', this.handleBlur, true);
@@ -105,7 +106,7 @@ export class Tooltip {
     slot.addEventListener('slotchange', this.handleSlotChange);
 
     // Show on init if open
-    this.tooltip.hidden = !this.open;
+    this.tooltipPositioner.hidden = !this.open;
     if (this.open) {
       this.show();
     }
@@ -219,8 +220,9 @@ export class Tooltip {
   syncOptions() {
     this.popover.setOptions({
       placement: this.placement,
-      skidding: this.skidding,
       distance: this.distance,
+      skidding: this.skidding,
+      transitionElement: this.tooltip,
       onAfterHide: () => this.slAfterHide.emit(),
       onAfterShow: () => this.slAfterShow.emit()
     });
@@ -232,18 +234,20 @@ export class Tooltip {
         <slot aria-describedby={this.componentId} />
 
         {!this.disabled && (
-          <div
-            part="base"
-            ref={el => (this.tooltip = el)}
-            id={this.componentId}
-            class={{
-              tooltip: true,
-              'tooltip--open': this.open
-            }}
-            role="tooltip"
-            aria-hidden={!this.open}
-          >
-            {this.content}
+          <div ref={el => (this.tooltipPositioner = el)} class="tooltip-positioner">
+            <div
+              part="base"
+              ref={el => (this.tooltip = el)}
+              id={this.componentId}
+              class={{
+                tooltip: true,
+                'tooltip--open': this.open
+              }}
+              role="tooltip"
+              aria-hidden={!this.open}
+            >
+              {this.content}
+            </div>
           </div>
         )}
       </Host>