@zendeskgarden/react-tooltips

@zendeskgarden/react-tooltips

This package includes presentation components and render prop containers relating to Tooltips in the Garden Design System.

Installation

npm install @zendeskgarden/react-tooltips

# Peer Dependencies - Also Required
npm install react react-dom prop-types styled-components @zendeskgarden/react-theming

Usages

TooltipElement

Standard tooltip usages.

/**
 * Include tooltip styling at the root of your application
 */
import '@zendeskgarden/react-tooltips/dist/styles.css';

import { ThemingProvider } from '@zendeskgarden/react-theming';
import { Tooltip } from '@zendeskgarden/react-tooltips';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Tooltip trigger={<button>Trigger top placement</button>}>This an small tooltip</Tooltip>
</ThemeProvider>;

TooltipContainer

Advanced tooltip usages.

<TooltipContainer
  trigger={({ getTriggerProps }) => (
    <button {...getTriggerProps()}>Hover or Focus to trigger tooltip</button>
  )}
>
  {({ getTooltipProps, placement }) => (
    <LightTooltip {...getTooltipProps({ placement })}>Example tooltip content</LightTooltip>
  )}
</TooltipContainer>

RTL Locale Layouts

The Tooltip and TooltipContainer components automatically handle RTL layouts based on their parent ThemeProvider.

English (LTR) Placements

                  TOP_START     TOP        TOP_END
       START_TOP  +------------------------------+  END_TOP
                  |   ---inline direction --->   |
                  |  |                           |
           START  |  | block      * horizontal * |  END
                  |  | direction  *writing mode* |
                  |  V                           |
    START_BOTTOM  +------------------------------+  END_BOTTOM
                  BOTTOM_START BOTTOM   BOTTOM_END

Arabic/Hebrew (RTL) Placements

                  TOP_END     TOP        TOP_START
         END_TOP  +------------------------------+  START_TOP
                  |  <--- inline direction---    |
                  |  |                           |
             END  |  | block      * horizontal * |  START
                  |  | direction  *writing mode* |
                  |  V                           |
      END_BOTTOM  +------------------------------+  START_BOTTOM
                  BOTTOM_END   BOTTOM BOTTOM_START