title: Tooltip subtitle: A tooltip that appears on hover or focus. description: A cross-platform React tooltip component that shows contextual information when an element is hovered or focused.

Tooltip

A cross-platform React tooltip component that displays contextual information when a user hovers over or focuses on an element. Supports multiple placements and animations.

Installation

npm install @xsolla/xui-tooltip
# or
yarn add @xsolla/xui-tooltip

Demo

Basic Tooltip

import * as React from 'react';
import { Tooltip } from '@xsolla/xui-tooltip';
import { Button } from '@xsolla/xui-button';

export default function BasicTooltip() {
  return (
    <Tooltip content="This is a helpful tip">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Tooltip Placements

import * as React from 'react';
import { Tooltip } from '@xsolla/xui-tooltip';
import { Button } from '@xsolla/xui-button';

export default function TooltipPlacements() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, padding: 48 }}>
      <Tooltip content="Top left" placement="top-left">
        <Button variant="secondary">Top Left</Button>
      </Tooltip>
      <Tooltip content="Top center" placement="top">
        <Button variant="secondary">Top</Button>
      </Tooltip>
      <Tooltip content="Top right" placement="top-right">
        <Button variant="secondary">Top Right</Button>
      </Tooltip>

      <Tooltip content="Left side" placement="left">
        <Button variant="secondary">Left</Button>
      </Tooltip>
      <div />
      <Tooltip content="Right side" placement="right">
        <Button variant="secondary">Right</Button>
      </Tooltip>

      <Tooltip content="Bottom left" placement="bottom-left">
        <Button variant="secondary">Bottom Left</Button>
      </Tooltip>
      <Tooltip content="Bottom center" placement="bottom">
        <Button variant="secondary">Bottom</Button>
      </Tooltip>
      <Tooltip content="Bottom right" placement="bottom-right">
        <Button variant="secondary">Bottom Right</Button>
      </Tooltip>
    </div>
  );
}

Tooltip Sizes

import * as React from 'react';
import { Tooltip } from '@xsolla/xui-tooltip';
import { Button } from '@xsolla/xui-button';

export default function TooltipSizes() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Tooltip content="Small tooltip" size="sm">
        <Button variant="secondary">Small</Button>
      </Tooltip>
      <Tooltip content="Medium tooltip" size="md">
        <Button variant="secondary">Medium</Button>
      </Tooltip>
      <Tooltip content="Large tooltip" size="lg">
        <Button variant="secondary">Large</Button>
      </Tooltip>
      <Tooltip content="Extra large tooltip" size="xl">
        <Button variant="secondary">XL</Button>
      </Tooltip>
    </div>
  );
}

Tooltip with Delay

import * as React from 'react';
import { Tooltip } from '@xsolla/xui-tooltip';
import { Button } from '@xsolla/xui-button';

export default function TooltipWithDelay() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Tooltip content="Appears immediately" delayEnter={0}>
        <Button variant="secondary">No Delay</Button>
      </Tooltip>
      <Tooltip content="Appears after 500ms" delayEnter={500}>
        <Button variant="secondary">500ms Delay</Button>
      </Tooltip>
      <Tooltip content="Stays visible for 500ms" delayLeave={500}>
        <Button variant="secondary">Slow Hide</Button>
      </Tooltip>
    </div>
  );
}

Anatomy

Import the component and wrap your trigger element:

import { Tooltip } from '@xsolla/xui-tooltip';

<Tooltip
  content="Tooltip text"       // Content to display
  placement="top"              // Position relative to trigger
  size="md"                     // Size variant
  offset={12}                  // Distance from trigger
  delayEnter={0}               // Delay before showing
  delayLeave={0}               // Delay before hiding
>
  <TriggerElement />
</Tooltip>

Examples

Rich Content Tooltip

import * as React from 'react';
import { Tooltip } from '@xsolla/xui-tooltip';
import { Avatar } from '@xsolla/xui-avatar';

export default function RichContentTooltip() {
  return (
    <Tooltip
      content={
        <div style={{ textAlign: 'center' }}>
          <strong>John Doe</strong>
          <br />
          <span style={{ opacity: 0.7 }}>Senior Developer</span>
        </div>
      }
    >
      <Avatar text="JD" />
    </Tooltip>
  );
}

Icon with Tooltip

import * as React from 'react';
import { Tooltip } from '@xsolla/xui-tooltip';
import { Edit, TrashCan, MoreHorizontal } from '@xsolla/xui-icons-base';

export default function IconTooltip() {
  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Tooltip content="Edit item">
        <Edit style={{ cursor: 'pointer' }} />
      </Tooltip>
      <Tooltip content="Delete item">
        <TrashCan style={{ cursor: 'pointer' }} />
      </Tooltip>
      <Tooltip content="More options">
        <MoreHorizontal style={{ cursor: 'pointer' }} />
      </Tooltip>
    </div>
  );
}

Controlled Tooltip

import * as React from 'react';
import { Tooltip } from '@xsolla/xui-tooltip';
import { Button } from '@xsolla/xui-button';

export default function ControlledTooltip() {
  const [visible, setVisible] = React.useState(false);

  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <Tooltip content="I'm controlled!" controlledVisible={visible}>
        <Button variant="secondary">Target</Button>
      </Tooltip>
      <Button onPress={() => setVisible(!visible)}>
        {visible ? 'Hide' : 'Show'} Tooltip
      </Button>
    </div>
  );
}

Disabled Button with Tooltip

import * as React from 'react';
import { Tooltip } from '@xsolla/xui-tooltip';
import { Button } from '@xsolla/xui-button';

export default function DisabledButtonTooltip() {
  return (
    <Tooltip content="You need to complete the form first">
      <span> {/* Wrapper needed for disabled elements */}
        <Button disabled>Submit</Button>
      </span>
    </Tooltip>
  );
}

API Reference

Tooltip

A tooltip component that shows on hover/focus.

Tooltip Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | content | ReactNode | - | Required. Tooltip content. | | children | ReactNode | - | Required. Trigger element. | | size | "sm" \| "md" \| "lg" \| "xl" | "md" | Size of the tooltip. | | placement | TooltipPlacement | "top" | Position relative to trigger. | | offset | number | 12 | Distance from trigger in pixels. | | delayEnter | number | - | Delay before showing (ms). | | delayLeave | number | - | Delay before hiding (ms). | | controlledVisible | boolean | - | Control visibility externally. | | style | CSSProperties | - | Custom styles. | | className | string | - | Custom class name. | | data-testid | string | - | Test identifier. |

TooltipPlacement Options:

| Placement | Description | | :-------- | :---------- | | top | Centered above trigger | | top-left | Above, aligned to left edge | | top-right | Above, aligned to right edge | | bottom | Centered below trigger | | bottom-left | Below, aligned to left edge | | bottom-right | Below, aligned to right edge | | left | Centered to the left | | right | Centered to the right |

Size Typography:

| Size | Font Size | Line Height | | :--- | :-------- | :---------- | | sm | 14px | 16px | | md | 16px | 18px | | lg | 18px | 20px | | xl | 20px | 22px |

Theming

Tooltip uses the design system theme for colors:

// Colors accessed via theme
theme.colors.background.inverse    // Tooltip background
theme.colors.content.inverse       // Tooltip text

Accessibility

• Tooltip appears on focus for keyboard users
• Press Escape to dismiss tooltip
• Arrow indicator points to trigger element
• Content is accessible to screen readers
• Follows WCAG tooltip guidelines