Fix tooltip custom properties

CHANGELOG.md

@@ -6,8 +6,9 @@
 - Add `sl-format-bytes` utility component
 - Add `clearable` and `required` props to `sl-select`
 - Add `slClear` event to `sl-input`
+- Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
+- Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
 - 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

@@ -24,6 +24,7 @@
 .tooltip-positioner {
   position: absolute;
   z-index: var(--sl-z-index-tooltip);
+  pointer-events: none;
 }
 
 .tooltip {
@@ -36,11 +37,13 @@
   line-height: var(--sl-tooltip-line-height);
   color: var(--sl-tooltip-color);
   opacity: 0;
-  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;
+  transform: scale(0.8);
+  transform-origin: bottom;
+  transition-property: opacity, transform;
+  transition-delay: var(--hide-delay);
+  transition-duration: var(--hide-duration);
+  transition-timing-function: var(--hide-timing-function);
 
   &::after {
     content: '';
@@ -50,9 +53,30 @@
   }
 }
 
-.popover-visible .tooltip {
+.tooltip-positioner {
-  opacity: 1;
+  &[data-popper-placement^='top'] .tooltip {
-  transform: scale(1);
+    transform-origin: bottom;
+  }
+
+  &[data-popper-placement^='bottom'] .tooltip {
+    transform-origin: top;
+  }
+
+  &[data-popper-placement^='left'] .tooltip {
+    transform-origin: right;
+  }
+
+  &[data-popper-placement^='right'] .tooltip {
+    transform-origin: left;
+  }
+
+  &.popover-visible .tooltip {
+    opacity: 1;
+    transform: scale(1);
+    transition-delay: var(--show-delay);
+    transition-duration: var(--show-duration);
+    transition-timing-function: var(--show-timing-function);
+  }
 }
 
 // Arrow + bottom