feat(DefinitionTooltip): add openOnHover prop (#12288)

* feat(DefinitionTooltip): add ability to open on hover

* test(snapshot): update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: tw15egan

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -2492,6 +2492,12 @@ Map {
             "bottom",
             "bottom-left",
             "bottom-right",
+            "left",
+            "left-bottom",
+            "left-top",
+            "right",
+            "right-bottom",
+            "right-top",
           ],
         ],
         "type": "oneOf",
@@ -2513,6 +2519,9 @@ Map {
       "id": Object {
         "type": "string",
       },
+      "openOnHover": Object {
+        "type": "bool",
+      },
       "tooltipText": [Function],
       "triggerClassName": Object {
         "type": "string",

packages/react/src/components/Tooltip/next/DefinitionTooltip.js

@@ -21,6 +21,7 @@ function DefinitionTooltip({
   definition,
   defaultOpen = false,
   id,
+  openOnHover,
   tooltipText,
   triggerClassName,
   ...rest
@@ -45,6 +46,9 @@ function DefinitionTooltip({
       onMouseLeave={() => {
         setOpen(false);
       }}
+      onMouseEnter={() => {
+        openOnHover ? setOpen(true) : null;
+      }}
       open={isOpen}>
       <button
         {...rest}
@@ -82,6 +86,14 @@ DefinitionTooltip.propTypes = {
     'bottom',
     'bottom-left',
     'bottom-right',
+
+    'left',
+    'left-bottom',
+    'left-top',
+
+    'right',
+    'right-bottom',
+    'right-top',
   ]),
 
   /**
@@ -111,6 +123,11 @@ DefinitionTooltip.propTypes = {
    */
   id: PropTypes.string,
 
+  /**
+   * Specifies whether or not the `DefinitionTooltip` should open on hover or not
+   */
+  openOnHover: PropTypes.bool,
+
   /**
    * [Deprecated in v11] Please use the `definition` prop instead.
    *

packages/react/src/components/Tooltip/next/DefinitionTooltip.stories.js

@@ -59,17 +59,10 @@ export const Default = () => {
 };
 
 const PlaygroundStory = (props) => {
-  const { align, defaultOpen, definition } = props;
   return (
     <p>
       This sentence contains a{' '}
-      <DefinitionTooltip
-        align={align}
-        defaultOpen={defaultOpen}
-        definition={definition}>
-        definition tooltip
-      </DefinitionTooltip>
-      .
+      <DefinitionTooltip {...props}>definition tooltip</DefinitionTooltip>.
     </p>
   );
 };
@@ -87,6 +80,14 @@ Playground.argTypes = {
       'bottom',
       'bottom-left',
       'bottom-right',
+
+      'left',
+      'left-bottom',
+      'left-top',
+
+      'right',
+      'right-bottom',
+      'right-top',
     ],
     control: {
       type: 'select',
@@ -101,4 +102,10 @@ Playground.argTypes = {
     },
     defaultValue: 'Example definition',
   },
+  openOnHover: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
 };