title: Toggletip subtitle: Click-triggered popover. description: A cross-platform React toggletip component that displays rich content in a popover triggered by clicking.

Toggletip

A cross-platform React toggletip component that shows rich content (title, body, footer) in a popover when the trigger element is clicked.

Installation

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

Demo

Basic Toggletip

import * as React from 'react';
import { Toggletip } from '@xsolla/xui-toggletip';
import { IconButton } from '@xsolla/xui-button';
import { HelpCircle } from '@xsolla/xui-icons-base';

export default function BasicToggletip() {
  return (
    <Toggletip
      title="Help"
      content="Click here to learn more about this feature."
    >
      <IconButton
        icon={<HelpCircle size={20} />}
        variant="secondary"
        tone="mono"
        size="sm"
        aria-label="Help"
      />
    </Toggletip>
  );
}

With Footer Actions

import * as React from 'react';
import { Toggletip } from '@xsolla/xui-toggletip';
import { Button } from '@xsolla/xui-button';
import { Info } from '@xsolla/xui-icons-base';

export default function WithFooter() {
  return (
    <Toggletip
      title="Confirmation"
      content="Are you sure you want to proceed with this action?"
      footer={
        <>
          <Button size="sm" variant="secondary">Cancel</Button>
          <Button size="sm">Confirm</Button>
        </>
      }
    >
      <Button size="sm" iconLeft={<Info size={16} />}>
        Details
      </Button>
    </Toggletip>
  );
}

Different Directions

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

export default function Directions() {
  return (
    <div style={{ display: 'flex', gap: 16, padding: 100 }}>
      <Toggletip direction="top" content="Appears above">
        <Button size="sm">Top</Button>
      </Toggletip>
      <Toggletip direction="bottom" content="Appears below">
        <Button size="sm">Bottom</Button>
      </Toggletip>
      <Toggletip direction="left" content="Appears left">
        <Button size="sm">Left</Button>
      </Toggletip>
      <Toggletip direction="right" content="Appears right">
        <Button size="sm">Right</Button>
      </Toggletip>
    </div>
  );
}

Anatomy

import { Toggletip } from '@xsolla/xui-toggletip';

<Toggletip
  title="Title"                // Optional header title
  content="Description"        // Main content (string or ReactNode)
  footer={<Actions />}         // Optional footer actions
  direction="top"              // Placement direction
  autoDirection={true}         // Auto-adjust if near edges
  offset={12}                  // Distance from trigger
  width="288px"                // Popover width
>
  <TriggerElement />
</Toggletip>

Examples

Feature Explanation

import * as React from 'react';
import { Toggletip } from '@xsolla/xui-toggletip';
import { HelpCircle } from '@xsolla/xui-icons-base';

export default function FeatureHelp() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span>Premium Features</span>
      <Toggletip
        title="Premium Benefits"
        content={
          <ul style={{ margin: 0, paddingLeft: 20 }}>
            <li>Unlimited downloads</li>
            <li>Priority support</li>
            <li>Advanced analytics</li>
            <li>Custom branding</li>
          </ul>
        }
      >
        <HelpCircle size={16} style={{ cursor: 'pointer' }} />
      </Toggletip>
    </div>
  );
}

Info Popover

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

export default function InfoPopover() {
  return (
    <Toggletip
      title="Payment Information"
      content="Your payment will be processed securely through our payment provider. You will receive a confirmation email once the transaction is complete."
      footer={
        <Button size="sm" variant="secondary">Learn More</Button>
      }
      direction="bottom"
      width="320px"
    >
      <Button size="sm" variant="secondary">
        Payment Info
      </Button>
    </Toggletip>
  );
}

Quick Actions

import * as React from 'react';
import { Toggletip } from '@xsolla/xui-toggletip';
import { Button, IconButton } from '@xsolla/xui-button';
import { MoreVertical, Edit, Copy, Trash } from '@xsolla/xui-icons-base';

export default function QuickActions() {
  return (
    <Toggletip
      content={
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <Button size="sm" variant="secondary" iconLeft={<Edit size={16} />} fullWidth>
            Edit
          </Button>
          <Button size="sm" variant="secondary" iconLeft={<Copy size={16} />} fullWidth>
            Duplicate
          </Button>
          <Button size="sm" variant="secondary" tone="alert" iconLeft={<Trash size={16} />} fullWidth>
            Delete
          </Button>
        </div>
      }
      direction="bottom-right"
      width="160px"
    >
      <IconButton
        icon={<MoreVertical size={20} />}
        variant="secondary"
        tone="mono"
        size="sm"
        aria-label="More actions"
      />
    </Toggletip>
  );
}

Form Field Help

import * as React from 'react';
import { Toggletip } from '@xsolla/xui-toggletip';
import { Input } from '@xsolla/xui-input';
import { HelpCircle } from '@xsolla/xui-icons-base';

export default function FormFieldHelp() {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
        <label>API Key</label>
        <Toggletip
          content="Your API key can be found in the Developer Console under Settings > API Keys. Keep this key secure and never share it publicly."
          direction="right"
        >
          <HelpCircle size={14} style={{ cursor: 'pointer', color: '#666' }} />
        </Toggletip>
      </div>
      <Input placeholder="Enter your API key" />
    </div>
  );
}

API Reference

Toggletip

ToggletipProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Trigger element. | | title | string | - | Optional title in header. | | content | ReactNode | - | Main content (string or element). | | footer | ReactNode | - | Optional footer (usually buttons). | | direction | ToggletipPlacement | "top" | Placement relative to trigger. | | autoDirection | boolean | true | Auto-adjust placement near edges. | | offset | number | 12 | Distance from trigger in pixels. | | width | string | "288px" | Popover width. | | data-testid | string | - | Test identifier. |

ToggletipPlacement:

type ToggletipPlacement =
  | "top"
  | "top-left"
  | "top-right"
  | "bottom"
  | "bottom-left"
  | "bottom-right"
  | "left"
  | "right";

Behavior

• Opens on trigger click
• Closes on clicking outside
• Closes on Escape key
• Auto-adjusts position to stay in viewport (when autoDirection is true)
• Shadow and border from theme for visual elevation

Toggletip vs Tooltip

| Feature | Toggletip | Tooltip | | :------ | :-------- | :------ | | Trigger | Click | Hover | | Content | Rich (title, body, footer) | Simple text | | Interaction | Can contain interactive elements | Non-interactive | | Use case | Help text, mini forms, actions | Quick hints |

Accessibility

• Click-triggered for keyboard accessibility
• Escape key closes the popover
• Focus is managed appropriately
• Content is accessible to screen readers
• Use descriptive trigger elements