Develop

Tooltip

Updated: Aug 29, 2026

Overview

Tooltips provide brief, contextual information that appears when a user hovers over or focuses on a UI element. They clarify an icon-only button or add a hint without crowding the panel. The Meta VR UI Set SDK provides Tooltip, a bubble that follows an anchor you track.

Key features

  • Explicit anchor: UiSetAnchor tracks the window-space bounds of the described content. Nothing is drawn until the anchor has a position.
  • Caller-owned visibility: The bubble shows for as long as the composable stays in the composition. Hover, focus, or a long press drives it.
  • Free placement: The Tooltip call can sit anywhere in the same composition. The popup follows the tracked bounds, not its own call site.
  • Placement and flipping: placement prefers the space above or below the anchor. The popup flips to the other side when that space is too small.
  • Content: A title, an optional subtitle, and an optional icon. The title shows up to two lines and the subtitle up to three.
  • Theming: Bubble, text, icon, and outline colors come from TooltipDefaults. Padding, width, gap, and elevation come from UiSetTheme.dimensions.tooltips.

Usage

Create the anchor with UiSetAnchor.rememberAnchor(), attach it with Modifier.anchor(), and pass the same instance to Tooltip. Share one MutableInteractionSource with the anchored component to drive the tooltip from hover.
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsHoveredAsState
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.Modifier
import metavrx.uiset.compose.Icon
import metavrx.uiset.compose.UiSetAnchor
import metavrx.uiset.compose.anchor
import metavrx.uiset.compose.button.ButtonStyle
import metavrx.uiset.compose.button.IconButton
import metavrx.uiset.compose.theme.icons.Icons
import metavrx.uiset.compose.tooltip.Tooltip

val interactionSource = remember { MutableInteractionSource() }
val isHovered by interactionSource.collectIsHoveredAsState()
val anchor = UiSetAnchor.rememberAnchor()

Box(Modifier.anchor(anchor)) {
    IconButton(
        icon = { Icon(Icons.Regular.Bookmark, contentDescription = null) },
        onClick = { /* ... */ },
        contentDescription = "Bookmark",
        style = ButtonStyle.Secondary,
        interactionSource = interactionSource,
    )
}

if (isHovered) {
    Tooltip(title = "Bookmark", anchor = anchor)
}
Add a subtitle and an icon for a fuller explanation, and place the bubble below the anchor where the content above it matters.
import metavrx.uiset.compose.tooltip.TooltipPlacement

Tooltip(
    title = "Passthrough is on",
    anchor = anchor,
    subtitle = "Your room is visible behind this panel",
    icon = { Icon(Icons.Regular.Info, contentDescription = null) },
    placement = TooltipPlacement.Below,
)

Common parameters

  • title: String: The primary tooltip text.
  • anchor: UiSetAnchor: The tracked bounds the bubble positions against. Create it with UiSetAnchor.rememberAnchor().
  • subtitle: String? = null: Supporting text below the title.
  • icon: (@Composable () -> Unit)? = null: Icon inside the bubble.
  • placement: TooltipPlacement = TooltipPlacement.Above: The preferred side of the anchor.
  • titleMaxLines: Int = 2 and subtitleMaxLines: Int = 3: Line limits before the text is cut off.
  • colors: TooltipColors: Bubble, text, icon, and outline colors. Defaults come from TooltipDefaults.
  • dimensions: TooltipDimensions: Padding, icon size, width, gap, and elevation.
  • shape: Shape: The bubble shape.
  • modifier: Modifier = Modifier: Applied to the bubble inside the popup. The popup itself has no layout node to modify.
A tooltip supplements the interface, so keep the title to a few words and make sure the UI is usable without it.
Meta
English (US)
© 2026 Meta