@fluent-windows/core/es/Tooltip/Tooltip.js

React components that inspired by Microsoft's Fluent Design System.

import * as React from 'react';
import classNames from 'classnames';
import { usePopper, useHover, useClick, useTouch, useFocus, useClickOutside } from '@fluent-windows/hooks';
import { createUseStyles } from '@fluent-windows/styles';
import { styles } from './Tooltip.styled';
import { TooltipPropTypes } from './Tooltip.type';
import Portal from '../Portal';
import Transition from '../Transition';
export const name = 'Tooltip';
const useStyles = createUseStyles(styles, {
  name
});

const Tooltip = props => {
  const {
    as: Component = 'div',
    className: classNameProp,
    children,
    title,
    visible,
    onChange,
    trigger = 'hover',
    ...propperOptions
  } = props;
  const [referenceRef, popperRef] = usePopper(propperOptions);
  const isControlled = React.useMemo(() => !!visible, [visible]);
  const hoverHandler = useHover(onChange);
  const clickHandler = useClick(onChange);
  useClickOutside(referenceRef, () => {
    clickHandler[2] && clickHandler[2](false);
    onChange && onChange(false);
  });
  const touchHandler = useTouch(onChange);
  const focusHandler = useFocus(onChange);
  const triggerMap = {
    hover: hoverHandler,
    click: clickHandler,
    touch: touchHandler,
    focus: focusHandler
  };
  const [currentStatus, bind] = triggerMap[trigger];
  const isVisible = isControlled ? visible : currentStatus;
  const classes = useStyles(props);
  const className = classNames(classes.root, classNameProp);
  const content = React.useMemo(() => typeof title === 'string' ? React.createElement(Component, {
    className: className,
    ref: popperRef
  }, title) : React.cloneElement(title, {
    ref: popperRef,
    ...bind
  }), [title, className, popperRef, bind]);
  return React.createElement(React.Fragment, null, React.cloneElement(children, {
    ref: referenceRef,
    ...bind
  }), React.createElement(Portal, null, React.createElement(Transition, {
    visible: isVisible,
    wrapper: false,
    mountOnEnter: true,
    unmountOnExit: true
  }, content)));
};

Tooltip.displayName = 'FTooltip';
Tooltip.propTypes = TooltipPropTypes;
Tooltip.defaultProps = {
  trigger: 'hover'
};
export default Tooltip;