Tooltip: Preserve hover style when cursor moves to tooltip text (#1017)

* Tooltip now clones child with hover class if tooltip is Open

* Added a note to docs

* Clarified language in docs

* Fixed playground index.tsx

Co-authored-by: Luke Bowerman <[email protected]>

Author: Elliot

packages/components/src/Tooltip/Tooltip.tsx

@@ -234,6 +234,7 @@ export function useTooltip({
 
   return {
     'aria-describedby': guaranteedId,
+    isOpen,
     onBlur: handleClose,
     onFocus: handleOpen,
     onMouseOut: handleMouseOut,
@@ -254,7 +255,8 @@ export const Tooltip: FC<TooltipProps> = ({ children, ...props }) => {
   const tooltipProps = useTooltip(props)
 
   const tooltipPropsLabeled = {
-    ...omit(tooltipProps, ['tooltip', 'popperInstanceRef']),
+    ...omit(tooltipProps, ['tooltip', 'popperInstanceRef', 'isOpen']),
+    className: tooltipProps.isOpen ? 'hover' : '',
   }
 
   let target = children

packages/playground/src/index.tsx

@@ -25,13 +25,21 @@
  */
 import React from 'react'
 import { render } from 'react-dom'
-import { ComponentsProvider } from '@looker/components'
-import { ButtonSetDemo } from './Actions/ButtonSetDemo'
+import { ComponentsProvider, Tooltip, Button } from '@looker/components'
 
 const App = () => {
   return (
     <ComponentsProvider>
-      <ButtonSetDemo />
+      <div>
+        <Tooltip content="Hello Darkness My Old Friend" placement="right">
+          <Button>Hello World</Button>
+        </Tooltip>
+      </div>
+      <div>
+        <Tooltip content="Hello Darkness My Old Friend" placement="right">
+          {(props) => <Button {...props}>Hello World</Button>}
+        </Tooltip>
+      </div>
     </ComponentsProvider>
   )
 }

packages/www/src/documentation/components/overlays/tooltip.mdx

@@ -29,6 +29,8 @@ A simple Tooltip component with out of the box styles and behavior.
 </Tooltip>
 ```
 
+## Tooltip Placement
+
 Tooltip allows you to specify where it should appear in relation to the target element. It accepts the following values:
 
 1. `auto`
@@ -92,4 +94,8 @@ If you need to be very specific
 </Tooltip>
 ```
 
-## Tooltip Placement
+## Tooltip passes a "hover" class
+
+In both the regular and "Render Prop" styles, `Tooltip` will pass a class named `hover` to its child element (or function) when the `Tooltip` is open.
+
+This will preserve any hover styling when the cursor is on the tooltip text and off of the trigger element itself.