From 9d194a17f452df9541c78c45fd3c1bbfbb011438 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 26 Aug 2020 07:09:01 -0400
Subject: [PATCH] Fix tooltip custom properties

---
 CHANGELOG.md                        |  3 ++-
 src/components/tooltip/tooltip.scss | 38 +++++++++++++++++++++++------
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b62a85a6..2dca7c1a 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss
index 60010fbe..45a6dd8a 100644
--- a/src/components/tooltip/tooltip.scss
+++ b/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 {
-  opacity: 1;
-  transform: scale(1);
+.tooltip-positioner {
+  &[data-popper-placement^='top'] .tooltip {
+    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