Text with tooltip

Single-line text that truncates with an ellipsis and reveals its full value in a tooltip only when it actually overflows.

#Usage

The tooltip stays hidden while the text fits. Constrain the width (or let a flex parent do it) so the text has something to truncate against.

#Custom message

By default the tooltip shows the text itself. Pass message to show something else — for example the raw value behind a formatted one. The text still has to overflow for the tooltip to appear.

#Always show the tooltip

Set forceTooltip to show the tooltip on hover even when the text fits. Keep the width constrained so the tooltip anchors to the text.

#Guidelines

#When to use

• Show a value in a fixed or flexible width where it may be truncated, such as a table cell or list item.
• Give users a way to read the full text without changing the layout.

#When not to use

• For text that always fits — use Text instead.
• When the tooltip contents should be meaningfully different from the content the tooltip is on (e.g. contextual help or an explanation) — use a Tooltip directly.

#Props

Name	Default	Description
isTruncated	false	booleanTruncate overflowing text with an ellipsis if needed.
children	—	ReactNodeText.
size	"md"	"sm" | "md" | "lg"Font size.
fontWeight	"normal"	"normal" | "medium" | "semibold"Font weight
highlight	—	"primary" | "success" | "warning" | "danger"Highlight color.
letterSpacing	"normal"	"normal" | "wide"Letter spacing.
variant	undefined	undefined | "numeric" | "monospace"Variant
shimmer	false	booleanEnable animated shimmer effect on the text.
shimmerColor	—	ColorProps["color"]Color for the shimmer effect. Defaults to the 900 shade of the text color (e.g., "purple.500" → "purple.900"). Override for custom shimmer colors.
display	—	LayoutProps["display"]
color	—	ColorThe CSS color property.
isDisabled	false	booleanDisable the tooltip.
keyboardShortcut	—	stringThe keyboard shortcut to display in the tooltip. Use the + symbol to separate characters.
placement	"top"	PlacementWithLogicalThe placement of the tooltip.
message	—	ReactNodeTooltip content. Defaults to the text itself. A non-string, non-number child has no default, so pass message to give one a tooltip.
forceTooltip	—	booleanAlways show the tooltip, bypassing the content-fits check.
sx	—	SystemStyleObject