Tooltips
uiCategories.overlaysModals.components.showcases.tooltip.description
Installation
Import
Usage
uiCategories.overlaysModals.components.showcases.tooltip.usage
Design Guidelines
uiCategories.overlaysModals.components.showcases.tooltip.designGuidelines
uiCategories.overlaysModals.components.showcases.tooltip.examples.basicUsage.title
uiCategories.overlaysModals.components.showcases.tooltip.examples.basicUsage.description
uiCategories.overlaysModals.components.showcases.tooltip.examples.positioning.title
uiCategories.overlaysModals.components.showcases.tooltip.examples.positioning.description
uiCategories.overlaysModals.components.showcases.tooltip.examples.withIcons.title
uiCategories.overlaysModals.components.showcases.tooltip.examples.withIcons.description
uiCategories.overlaysModals.components.showcases.tooltip.examples.richContent.title
uiCategories.overlaysModals.components.showcases.tooltip.examples.richContent.description
uiCategories.overlaysModals.components.showcases.tooltip.examples.composedTooltip.title
uiCategories.overlaysModals.components.showcases.tooltip.examples.composedTooltip.description
Tooltip
uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltip.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
open | boolean | — | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltip.props.open.description |
defaultOpen | boolean | — | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltip.props.defaultOpen.description |
onOpenChange | (open: boolean) => void | — | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltip.props.onOpenChange.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
TooltipTrigger
uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltipTrigger.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
TooltipContent
uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltipContent.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "top" | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltipContent.props.side.description |
align | "start" | "center" | "end" | "center" | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltipContent.props.align.description |
sideOffset | number | 4 | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltipContent.props.sideOffset.description |
children | React.ReactNode | — | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltipContent.props.children.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
TooltipArrow
uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.tooltipArrow.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
ComposedTooltip
uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.composedTooltip.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
Trigger | React.ComponentType | — | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.composedTooltip.props.Trigger.description |
TriggerProps | object | — | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.composedTooltip.props.TriggerProps.description |
content | string | React.ReactNode | — | uiCategories.overlaysModals.components.showcases.tooltip.composedComponents.composedTooltip.props.content.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
Accessibility
Accessibility features and considerations
uiCategories.overlaysModals.components.showcases.tooltip.accessibility