diff --git a/packages/junipero/lib/Tooltip/index.js b/packages/junipero/lib/Tooltip/index.js
index 650c00ab9..9d80753c3 100644
--- a/packages/junipero/lib/Tooltip/index.js
+++ b/packages/junipero/lib/Tooltip/index.js
@@ -122,6 +122,13 @@ const Tooltip = forwardRef(({
return handlers;
};
+ const tooltipInner = (
+
+ );
+
const tooltip = (
- { text }
-
+ { animate
+ ? animate(tooltipInner, { opened: state.opened })
+ : tooltipInner
+ }
);
@@ -155,11 +164,8 @@ const Tooltip = forwardRef(({
{ state.opened || animate || apparition === 'css'
? container
- ? createPortal(
- animate ? animate(tooltip, { opened: state.opened }) : tooltip,
- ensureNode(container)
- )
- : animate ? animate(tooltip, { opened: state.opened }) : tooltip
+ ? createPortal(tooltip, ensureNode(container))
+ : tooltip
: null
}
>
diff --git a/packages/junipero/lib/Tooltip/index.styl b/packages/junipero/lib/Tooltip/index.styl
index 2e5cbdc5d..e647b88cb 100644
--- a/packages/junipero/lib/Tooltip/index.styl
+++ b/packages/junipero/lib/Tooltip/index.styl
@@ -1,16 +1,18 @@
@require "../theme/colors"
.junipero.tooltip
- color: $color-white
- border-radius: 4px
- padding: 8px 21px
- text-align: center
- pointer-events: none
- max-width: 250px
- background: $color-midnight
-
- .arrow
- position: absolute
+
+ .tooltip-inner
+ color: $color-white
+ border-radius: 4px
+ padding: 8px 21px
+ text-align: center
+ pointer-events: none
+ max-width: 250px
+ background: $color-midnight
+
+ .arrow
+ position: absolute
&[data-placement*="top"] .arrow,
&[data-placement*="bottom"] .arrow