Merge pull request #118 from HelixDesignSystem/tooltip-fixes

Add listeners and attributes to tooltips

Author: 100stacks

src/Tooltip/index.js

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { POSITIONS } from '../constants';
+import useEventListener from '../hooks/useEventListener';
 
-const Tooltip = ({ children, id, position }) => {
+const Tooltip = ({ children, id, position, onClose, onOpen, onReposition, ...rest }) => {
+  const hxRef = useEventListener({ onClose, onOpen, onReposition });
   return (
-    <hx-tooltip for={id} position={position}>
+    <hx-tooltip for={id} position={position} ref={hxRef} {...rest}>
       {children}
     </hx-tooltip>
   );
@@ -14,6 +16,8 @@ Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
   id: PropTypes.string.isRequired,
   position: PropTypes.oneOf(POSITIONS),
+  relativeTo: PropTypes.string,
+  htmlFor: PropTypes.string,
 };
 
 Tooltip.defaultProps = {

src/Tooltip/stories.js

@@ -1,43 +1,31 @@
 import centered from '@storybook/addon-centered/react';
 import { storiesOf } from '@storybook/react';
-import React, { useState } from 'react';
-
-import Select from '../Select';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { select, text } from '@storybook/addon-knobs/react';
 import Tooltip from '../Tooltip';
+import { POSITIONS } from '../constants';
 
 const id = 'tooltipDemo';
 
 storiesOf('Tooltip', module)
   .addDecorator(centered)
   .add('All Knobs', () => {
-    const [position, setPosition] = useState('top-left');
-
-    const handleChange = ({ target: { value } }) => {
-      setPosition(value);
-    };
+    let position = select('positions', POSITIONS, 'top-left');
+    let content = text('content', 'I am a tool tip');
 
     return (
-      <div>
+      <>
         <hx-icon id={id} type="help-circle" />
-        <Tooltip id={id} position={position}>
-          Some Message
+        <Tooltip
+          id={id}
+          position={position}
+          onOpen={action('onOpen')}
+          onClose={action('onClose')}
+          onReposition={action('onReposition')}
+        >
+          {content}
         </Tooltip>
-        <div style={{ marginTop: 100, width: 300 }}>
-          <Select id="selectTooltipDemo" label="Position" onChange={handleChange}>
-            <option value="top-left">Top Left</option>
-            <option value="top-center">Top Center</option>
-            <option value="top-right">Top Right</option>
-            <option value="right-top">Right Top</option>
-            <option value="right-middle">Right Middle</option>
-            <option value="right-bottom">Right Bottom</option>
-            <option value="bottom-right">Bottom Right</option>
-            <option value="bottom-center">Bottom Center</option>
-            <option value="bottom-left">Bottom Left</option>
-            <option value="left-bottom">Left Bottom</option>
-            <option value="left-middle">Left Middle</option>
-            <option value="left-top">Left Top</option>
-          </Select>
-        </div>
-      </div>
+      </>
     );
   });