fix(theme): fix tooltip styling & transitions

p3ol · Nov 16, 2022 · c93cb7b · c93cb7b
1 parent 2c580f4
commit c93cb7b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/react/lib/Tooltip/index.stories.js b/packages/react/lib/Tooltip/index.stories.js
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { slideInDownMenu } from '@junipero/transitions';
 
 import Tooltip from './index';
 
@@ -15,3 +16,9 @@ export const click = () => (
     Click me
   </Tooltip>
 );
+
+export const animated = () => (
+  <Tooltip text="Text" animate={slideInDownMenu} onToggle={action('toggle')}>
+    Hover me
+  </Tooltip>
+);
diff --git a/packages/theme/lib/Tooltip.sass b/packages/theme/lib/Tooltip.sass
@@ -2,10 +2,11 @@
   --background-color: var(--junipero-onyx)
   --text-color: var(--junipero-seashell)
 
-  background: var(--background-color)
-  border-radius: 8px
-  padding: 5px 20px
-  display: flex
-  color: var(--text-color)
-  pointer-events: none
-  max-width: 250px
+  .tooltip-inner
+    background: var(--background-color)
+    border-radius: 8px
+    padding: 5px 20px
+    display: flex
+    color: var(--text-color)
+    pointer-events: none
+    max-width: 250px