gui/apps/gui.hanzo.ai/data/docs/components/tooltip/1.0.0.mdx

---
title: Tooltip
description: A simple tooltip component
name: tooltip
component: Tooltip
package: tooltip
demoName: Tooltip
---

# Tooltip

<Description>A tooltip on web, with only accessibility output on native</Description>

<HeroContainer showAnimationDriverControl>
  <TooltipDemo />
</HeroContainer>

```tsx hero template=Tooltip

```

<Highlights
  features={[
    `Doesn't open until your mouse stops moving.`,
    `Easy to animate enter and exit.`,
    `Sizable, positionable, unstyled or styled.`,
  ]}
/>

<Notice>Note that Tooltip doesn't render on native platforms.</Notice>

## Installation

Tooltip is already installed in `hanzogui`, or you can install it independently:

```bash
npm install @hanzogui/tooltip
```

### PortalProvider

When rendering into root of app instead of inline, you'll first need to install the `@hanzogui/portal` package:

```bash
npm install @hanzogui/portal
```

Then add `PortalProvider` to the root of your app:

```tsx fileName="App.tsx"
import { PortalProvider } from '@hanzogui/portal'
import YourApp from './components/YourApp'

function App() {
  return (
    <PortalProvider shouldAddRootHost>
      <YourApp />
    </PortalProvider>
  )
}

export default App
```

<PropsTable
  data={[
    {
      name: 'shouldAddRootHost',
      type: 'boolean',
      required: false,
      description: `Defines whether to add a default root host or not.`,
    },
  ]}
/>

## Anatomy

```tsx
import { Tooltip } from '@hanzo/gui' // or '@hanzogui/tooltip'

export default () => (
  <Tooltip>
    <Tooltip.Trigger />
    <Tooltip.Content>
      <Tooltip.Arrow />
      {/* ... */}
    </Tooltip.Content>
  </Tooltip>
)
```

## API Reference

### Tooltip

Contains every component for the tooltip.

<PropsTable
  data={[
    {
      name: 'children',
      type: 'React.ReactNode',
      required: true,
      description: `Must contain Popover.Content`,
    },
    {
      name: 'groupId',
      type: 'string',
      required: false,
      description: `If given, will work alongside TooltipGroup to ensure only one tooltip in the groups stays open.`,
    },
    {
      name: 'restMs',
      type: 'number',
      required: false,
      description: `Time needed for cursor to rest before showing.`,
    },
    {
      name: 'delay',
      type: `number | { open?: number; close?: number }`,
      required: false,
      description: `Maximum time before showing (can be set independently for open/close).`,
    },
    {
      name: 'size',
      type: 'SizeTokens',
      required: false,
      description: `Passes size down too all sub-components when set for padding, arrow, borderRadius`,
    },
    {
      name: 'placement',
      type: 'Placement',
      required: false,
      description: `'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'`,
    },
    {
      name: 'open',
      type: 'boolean',
      required: false,
      description: ``,
    },
    {
      name: 'defaultOpen',
      type: 'boolean',
      required: false,
    },
    {
      name: 'onOpenChange',
      type: '(open: boolean) => void',
      required: false,
    },
    {
      name: 'modal',
      type: 'boolean',
      default: 'true',
      required: false,
      description: `Renders into root of app instead of inline`,
    },
    {
      name: 'stayInFrame',
      type: 'ShiftProps',
      required: false,
      description: `See floating-ui shift()`,
    },
    {
      name: 'allowFlip',
      type: 'FlipProps',
      required: false,
      description: `See floating-ui flip`,
    },
    {
      name: 'offset',
      type: 'OffsetOptions',
      required: false,
      description: `Determines the distance the Popover appears from the target, see floating-ui offset().`,
    },
  ]}
/>

<Notice>
  If using `modal={true}` (which is `true` by default), refer to the [PortalProvider
  installation](/ui/tooltip/1.0.0#portalprovider) for more information.
</Notice>

### Tooltip.Trigger

Used to trigger opening of the popover when uncontrolled, see YStack in [Stacks](/docs/components/stacks).

### Tooltip.Content

Renders as SizableStack (see [Stacks](/docs/components/stacks)) with an extra `size` prop that accepts any `SizeTokens`.

### Tooltip.Anchor

Renders as YStack, see [Stacks](/docs/components/stacks).

When you want the Trigger to be in another location from where the Tooltip attaches, use Anchor. When used, Anchor is where the Tooltip will attach, while Trigger will open it.