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 = ( +
+ { text } +
+
+ ); + 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