Skip to content
Sign in
An image of the Stripe logo
/
Create account
Sign in
Home
Payments
Finance automation
Banking as a service
Developer tools
No-code
All products
Home
Payments
Finance automation
Home
Payments
Finance automation
Banking as a service
Developer tools
Overview
Building your integration
Developer tools
SDKs
API
Security
Sample projects
Videos
Stripe Apps
    Overview
    Get started
    Create an app
    How Stripe Apps work
    Sample apps
    Development
    Store secrets
    Authorization flows
    Server-side logic
    App settings page
    Build a UI
    Onboarding
    UI design
    Design your app
    Style your app
    Design patterns
    Components
      Accordion
      Badge
      Banner
      BarChart
      Box
      Button
      ButtonGroup
      Checkbox
      Chip
      ContextView
      DateField
      Divider
      FocusView
      FormFieldGroup
      Icon
      Img
      Inline
      LineChart
      Link
      List
      Menu
      Radio
      Select
      SettingsView
      SignInView
      Sparkline
      Spinner
      Switch
      Table
      Tabs
      TextArea
      TextField
      Toast
      Tooltip
    Share and distribute
    Distribution options
    Upload your app
    Versions and releases
    Test your app
    Publish your app
    Promote your app
    Add deep links
    Using install links
    Using roles in UI Extensions
    Post-install actions
    App analytics
    Reference
    App manifest
    CLI
    Extension SDK
    Permissions
    Viewports
    Extensions
    Migrate to Stripe Apps
    Building extensions
Stripe Connectors
Partners
HomeDeveloper toolsComponents

Tooltip

Use Tooltips to provide additional contextual information about a particular element or subject.

To add the Tooltip component to your app:

import {Tooltip} from '@stripe/ui-extension-sdk/ui';

This is a preview of two Tooltip components with each type of label:

<Tooltip type="description" trigger={ <Button type="primary" disabled onPress={undefined}> Pay out to bank </Button> } > You have no available balance to pay out. You can create payouts when you've accumulated a positive balance again. </Tooltip> <Tooltip type="label" trigger={ <Button onPress={undefined}> <Icon name="notifications" /> </Button> } > Notifications </Tooltip>

Tooltips are overlays that appear when a user hovers or focuses a target element. Use Tooltips to provide additional contextual information about a particular element or subject. You can use tooltips as either descriptions or labels.

Avoid putting any interactive content such as links within a Tooltip, because keyboard users won’t be able to access it.

Props

Prop
Type
Description
trigger Required
RefObject<HTMLElement> | ReactElement<any, string | JSXElementConstructor<any>>
The target element that should be used as the Tooltip trigger.
delay
number
How much time in milliseconds to wait before showing the Tooltip on hover
placement
Placement
How the Tooltip should be placed relative to the trigger element
type
"label" | "description"
The style variant of the Tooltip

Placement

You can place tooltips in one of 4 primary directions and further align them along a secondary axis, resulting in a total of 12 possible placement options relative to the trigger. The placement automatically adjusts as necessary to ensure the Tooltip remains visible within the viewport.

<Tooltip placement="top left" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "top left" </Tooltip> <Tooltip placement="top" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "top" </Tooltip> <Tooltip placement="top right" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "top right" </Tooltip> <Tooltip placement="right top" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "right top" </Tooltip> <Tooltip placement="right" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "right" </Tooltip> <Tooltip placement="right bottom" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "right bottom" </Tooltip> <Tooltip placement="bottom right" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "bottom right" </Tooltip> <Tooltip placement="bottom" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "bottom" </Tooltip> <Tooltip placement="bottom left" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "bottom left" </Tooltip> <Tooltip placement="left bottom" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "left bottom" </Tooltip> <Tooltip placement="left" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "left" </Tooltip> <Tooltip placement="left top" trigger={<Button onPress={undefined}><Icon name="info" /></Button>}> "left top" </Tooltip>

Delay

Tooltips have a short delay for when they appear after hovering over their trigger element. You can control the amount of time it takes for a Tooltip to become active on hover using the delay prop. Tooltips always appear immediately when their trigger element receives keyboard focus.

<Tooltip delay={0} trigger={<Button onPress={undefined}>Immediate</Button>}> I showed up immediately. </Tooltip>

Tooltips appear immediately on hover while another Tooltip is already active.

<Tooltip trigger={<Button onPress={undefined}>Hover me</Button>}> I showed up after a delay. </Tooltip> <Tooltip trigger={<Button onPress={undefined}>Then me</Button>}> I showed up immediately. </Tooltip>

See also

  • Design patterns to follow
  • Style your app
  • UI testing
Was this page helpful?
Need help? Contact Support.
Watch our developer tutorials.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Placement
Delay
See also
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Log in to your Stripe account and press Control + Backtick (`) on your keyboard to start managing your Stripe resources in test mode. - View supported Stripe commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g., )
The Stripe Shell is best experienced on desktop.
$