@zendeskgarden/container-tooltip

This package includes containers relating to tooltip in the Garden Design System.

Installation

npm install @zendeskgarden/container-tooltip

Usage

This container implements the tooltip design pattern and can be used to build a tooltip component. Check out storybook for live examples.

useTooltip

import { useTooltip } from '@zendeskgarden/container-tooltip';

const Tooltip = () => {
  const { isVisible, getTooltipProps, getTriggerProps } = useTooltip({
    isVisible: false,
    delayMilliseconds: 500
  });

  const styles = {
    visibility: isVisible ? 'visible' : 'hidden',
    background: '#1f73b7',
    padding: '10px',
    margin: '6px 0',
    color: '#fff'
  };

  return (
    <>
      <div {...getTooltipProps({ style: styles })}>Tooltip</div>
      <button {...getTriggerProps()}>Trigger</button>
    </>
  );
};

TooltipContainer

import { TooltipContainer } from '@zendeskgarden/container-tooltip';

const Tooltip = () => {
  return (
    <TooltipContainer isVisible={false} delayMilliseconds={500}>
      {({ isVisible, getTooltipProps, getTriggerProps }) => {
        const styles = {
          visibility: isVisible ? 'visible' : 'hidden',
          background: '#1f73b7',
          padding: '10px',
          margin: '6px 0',
          color: '#fff'
        };

        return (
          <>
            <div
              {...getTooltipProps({
                style: styles
              })}
            >
              Tooltip
            </div>
            <button {...getTriggerProps()}>Trigger</button>
          </>
        );
      }}
    </TooltipContainer>
  );
};