react-lightning-design-system/module/scripts/TooltipContent.js

Salesforce Lightning Design System components built with React

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useRef, useState, useCallback } from 'react';
import { Button } from './Button';
import { Popover } from './Popover';

/**
 *
 */
export var TooltipContent = function TooltipContent(props) {
  var children = props.children,
    _props$icon = props.icon,
    icon = _props$icon === void 0 ? 'info' : _props$icon;
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    isHideTooltip = _useState2[0],
    setIsHideTooltip = _useState2[1];
  var popoverRef = useRef(null);
  var tooltipToggle = useCallback(function () {
    setIsHideTooltip(function (hidden) {
      return !hidden;
    });
  }, []);
  var onBlur = useCallback(function (e) {
    var _popoverRef$current;
    if (!((_popoverRef$current = popoverRef.current) !== null && _popoverRef$current !== void 0 && _popoverRef$current.contains(e.relatedTarget))) {
      setIsHideTooltip(true);
    }
  }, []);
  return /*#__PURE__*/React.createElement("span", {
    className: "slds-dropdown-trigger react-slds-tooltip-content"
  }, /*#__PURE__*/React.createElement(Button, {
    type: "icon",
    icon: icon,
    onClick: tooltipToggle,
    onBlur: onBlur
  }), /*#__PURE__*/React.createElement(Popover, {
    ref: popoverRef,
    hidden: isHideTooltip,
    tabIndex: -1,
    onBlur: onBlur,
    offsetX: -15,
    tooltip: true
  }, children));
};
//# sourceMappingURL=TooltipContent.js.map