Hex Core JS
    Preparing search index...

    Function Tooltip

    • For showing information on a parent component on hover or controlled manually. Displays content in a tooltip-style pop-up. Should be used with <Tooltip.Header>, <Tooltip.Body>, and <Tooltip.Footer> subcomponents for content layout.

      Parameters

      Returns Element

      A <Tooltip> must be a child of a <Tooltip.Container> to work properly.

      The sizing of the tooltip is determined by the sizing of the children and the parent component, so children should be given explicit sizes (especially a width or min-width). The className or style props on the tooltip subcomponents (<Tooltip.Header>, <Tooltip.Body>, and <Tooltip.Footer>) can be used to help with this.

    Index

    Methods

    Body Container Footer Header useToggle

    Methods

    Body

    • Container for a <Tooltip> that provides relative positioning for the <Tooltip> and opening/closing on hover. Hoverable content should be wrapped in a <Tooltip.Container> and a <Tooltip> should be a child (not general descendant of the container).

      Parameters

      Returns Element

    • Wraps useToggle and renames return values for convenience.

      Parameters

      Returns {
          closeTooltip: () => void;
          isTooltipOpen: boolean;
          openTooltip: () => void;
          setIsTooltipOpen: Dispatch<SetStateAction<boolean>>;
          toggleIsTooltipOpen: () => void;
      }

    Settings

    Member Visibility

    On This Page

    Methods