diff --git a/src/components/Tooltip/Tooltip.react.js b/src/components/Tooltip/Tooltip.react.js index edac215a..19596a44 100644 --- a/src/components/Tooltip/Tooltip.react.js +++ b/src/components/Tooltip/Tooltip.react.js @@ -7,10 +7,23 @@ import type { PopperChildrenProps, ReferenceChildrenProps } from "react-popper"; import styles from "./Tooltip.css"; type Props = {| - +content: string, - +children?: React.Node, + /** + * The reference element which the Tooltip will be based on. + */ + +children?: React.Element, + /** + * Any additional classNames for the Tooltip. + */ +className?: string, + /** + * This is the text content of the Tooltip. + */ + +content: string, + /** + * This is the placement of the Tooltip (top, bottom, left, right). + */ +placement?: Placement, + +type?: "link", |}; type State = { @@ -52,15 +65,22 @@ class Tooltip extends React.Component { return ( - {({ ref }: ReferenceChildrenProps) => ( -
- {children} -
- )} + {({ ref }: ReferenceChildrenProps) => + typeof children === "undefined" + ? // Type checking, undefined cannot be passed to React.cloneElement + console.error("undefined children provided to Tooltip.") + : this.props.type + ? React.cloneElement(children, { + ref: ref, + onMouseEnter: this._handleTriggerOnMouseEnter, + onMouseLeave: this._handleTriggerOnMouseLeave, + }) + : React.cloneElement(children, { + rootRef: ref, + onMouseEnter: this._handleTriggerOnMouseEnter, + onMouseLeave: this._handleTriggerOnMouseLeave, + }) + }
{this.state.isShown && (