Nightly Pocket Measurement

    @zendeskgarden/container-tooltip
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    @zendeskgarden/container-tooltip npm version

    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>
      );
    };

    Install

    npm i @zendeskgarden/container-tooltip

    DownloadsWeekly Downloads

    4,539

    Version

    1.0.0

    License

    Apache-2.0

    Unpacked Size

    36.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • zendesk-garden