# Tooltip component for Stripe Apps Use Tooltips to provide additional contextual information about a particular element or subject. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/tooltip?app-sdk-version=8. To add the `Tooltip` component to your app: ```js import {Tooltip} from '@stripe/ui-extension-sdk/ui'; ``` This is a preview of two `Tooltip` components with each type of `label`: 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. ### Tooltip props | Property | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `trigger` | (Required) `React.ReactElement` The target element that should be used as the `Tooltip` trigger. | | `delay` | (Optional) `number | undefined` How much time in milliseconds to wait before showing the `Tooltip` on hover. | | `placement` | (Optional) `("bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom") | undefined` How the `Tooltip` should be placed relative to the trigger element. | | `type` | (Optional) `("label" | "description") | undefined` The style variant of the `Tooltip`. | ## Placement You can place tooltips in one of four 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. ## 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. Tooltips appear immediately on hover while another Tooltip is already active. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/tooltip?app-sdk-version=9. To add the `Tooltip` component to your app: ```js import {Tooltip} from '@stripe/ui-extension-sdk/ui'; ``` This is a preview of two `Tooltip` components with each type of `label`: 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. ### Tooltip props | Property | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `trigger` | (Required) `React.ReactElement` The target element that should be used as the `Tooltip` trigger. | | `delay` | (Optional) `number | undefined` How much time in milliseconds to wait before showing the `Tooltip` on hover. | | `placement` | (Optional) `("bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom") | undefined` How the `Tooltip` should be placed relative to the trigger element. | | `type` | (Optional) `("label" | "description") | undefined` The style variant of the `Tooltip`. | ## Placement You can place tooltips in one of four 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. ## 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. Tooltips appear immediately on hover while another Tooltip is already active. ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)