@app-studio/components

Tooltip

A tooltip component for displaying contextual information on hover or focus, with customizable positioning, styling, and behavior.

View component source

Import

import { Tooltip } from '@app-studio/components';

New to the library? Complete installation and provider setup first.

Interactive examples

Try the component, then open Code to copy the complete example.

Loading preview…

import React from 'react';
import { Tooltip } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const DefaultTooltip = () => {
  return (
    <Vertical gap={20} width="100%" maxWidth={400}>
      <Text marginBottom={10}>
        <Tooltip content="This is a tooltip">
          <Button>Hover Me</Button>
        </Tooltip>
        Default Tooltip
      </Text>
    </Vertical>
  );
};

Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

Scroll horizontally to see every column.

Tooltip
Prop	Type	Default	Description
`content` Required	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`children` Required	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Content rendered inside the component.Source
`position`	`Position` `"bottom""left""right""top"`	`—`	Position of the element or notification.Source
`align`	`Alignment` `"start""center""end"`	`—`	See the type and source declaration for this property.Source
`size`	`Size` `"sm""md""lg"`	`—`	Size preset for the component.Source
`variant`	`Variant` `"light""dark""default"`	`—`	Visual treatment of the component.Source
`openDelay`	`number`	`—`	See the type and source declaration for this property.Source
`closeDelay`	`number`	`—`	See the type and source declaration for this property.Source
`showArrow`	`boolean`	`—`	See the type and source declaration for this property.Source
`defaultOpen`	`boolean`	`—`	See the type and source declaration for this property.Source
`isDisabled`	`boolean`	`—`	Disables user interaction.Source
`views`	`TooltipStyles`	`—`	Style overrides for the named internal parts.Source

Tooltip.Trigger

Scroll horizontally to see every column.

Tooltip.Trigger
Prop	Type	Default	Description
`children` Required	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Content rendered inside the component.Source
`views`	`{ container?: ViewProps; }`	`—`	Style overrides for the named internal parts.Source
`asChild`	`boolean`	`—`	See the type and source declaration for this property.Source

Tooltip.Content

Scroll horizontally to see every column.

Tooltip.Content
Prop	Type	Default	Description
`children` Required	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Content rendered inside the component.Source
`views`	`{ container?: ViewProps; arrow?: ViewProps; }`	`—`	Style overrides for the named internal parts.Source

For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.

Usage guidance

Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
These previews run in the browser. Check React Native setup for platform requirements and differences.