 <Flex align="center" gap="1">
  <Text size="2">Production API key</Text>
  <InfoPopover content="Production keys can only be viewed immediately after creation. Store them securely — they cannot be retrieved later." />
</Flex>

Use InfoPopover inline with text when a short supplementary explanation benefits from richer content than a tooltip can provide – multiple sentences, inline links, or formatting. It renders a small info icon as the trigger and reveals a 400px-wide popover with the provided content as its body.

If a single sentence is enough, reach for InfoTooltip instead – it’s lighter-weight and more appropriate for purely informational hover/focus content.

When to use each

Need	Component
One-line hint on hover/focus	`InfoTooltip`
Multi-sentence explanation, possibly with links or formatting	`InfoPopover`
Rich interactive content (buttons, forms, selectable text across lines)	`Popover`

API Reference

Prop	Type	Default
`content`	`ReactNode`
`children`	`ReactNode`	`<InfoCircledIcon color="gray" height={16} width={16} />`
`label`	`string`	`"Learn more"`

When children is omitted, the trigger renders as a 16×16 InfoCircledIcon inside a size-1 IconButton. Pass any element as children to replace the icon (for example a small custom icon). The label prop sets the trigger’s aria-label.

Examples

Default icon trigger with multi-sentence body

Configure your redirect URI

 <Text size="2">
  Configure your redirect URI
  <InfoPopover content="The redirect URI is where WorkOS sends users after authentication. It must match exactly — including protocol, host, and path — with the value registered in your application settings." />
</Text>

Rich content with links

Directory sync

 <Flex align="center" gap="1">
  <Text size="2">Directory sync</Text>
  <InfoPopover
    content={
      <>
        Keep your user directory synchronized with external identity providers.{' '}
        <Link href="https://workos.com/docs/directory-sync">
          Read the Directory Sync guide
        </Link>{' '}
        for setup instructions.
      </>
    }
  />
</Flex>