Tooltip

Updated: Apr 23, 2024

Tooltips provide brief, contextual information that appears when a user hovers over or focuses on a UI element (the “anchor”). They are useful for clarifying icons, providing hints, or displaying supplementary details without cluttering the main interface. The Meta Horizon OS UI Set provides standard controls adapted for spatial UIs.

Key features

Hover Triggered: Appears automatically when the anchor element is hovered.

Contextual: Provides information directly related to the anchor element.

Transient: Disappears shortly after the hover ends.

Customizable Content: Can display title, subtitle, and an icon.

Positioning: Can be aligned relative to the anchor with an offset.

Usage

The primary composable is SpatialTooltip, which wraps the anchor element and conditionally displays the tooltip content using a Popup.

Composable: SpatialTooltip

Key Parameters:

title: String: The main text content of the tooltip (required).

subtitle: String? = null: Optional secondary text line.

icon: @Composable (() -> Unit)? = null: Optional icon displayed to the left of the text content. The icon background is automatically styled.

anchor: @Composable () -> Unit: The composable function rendering the UI element that triggers the tooltip on hover.

alignment: Alignment = Alignment.Center: How the tooltip popup is aligned relative to the anchor bounds (for example, Alignment.TopCenter, Alignment.BottomStart).

offset: IntOffset = IntOffset(0, -100): Pixel offset applied to the tooltip’s position relative to the calculated alignment point. Negative Y moves it up.

interactionSource: MutableInteractionSource: Used internally to detect hover state on the anchor.

SpatialTooltipContent:

This composable renders the actual visual content of the tooltip (background, text, icon layout). It’s used internally by SpatialTooltip but can also be used standalone if you need to display tooltip-styled content outside the hover mechanism.

Parameters: modifier, title, subtitle, icon.

import com.meta.spatial.uiset.tooltip.SpatialTooltip
import com.meta.spatial.uiset.button.BorderlessCircleButton // Example anchor
import androidx.compose.material3.Icon
import androidx.compose.ui.Alignment
import androidx.compose.ui.unit.IntOffset
import com.meta.spatial.uiset.theme.icons.SpatialIcons
import com.meta.spatial.uiset.theme.icons.regular.* // Import desired icons
// ... other imports

// --- Example 1: Tooltip for an Icon Button ---
SpatialTooltip(
    title = "Settings",
    subtitle = "Adjust application preferences",
    // Position above the anchor
    alignment = Alignment.TopCenter,
    offset = IntOffset(0, -60), // Adjust offset as needed
    anchor = {
        BorderlessCircleButton(
            icon = { Icon(SpatialIcons.Regular.Settings, null) },
            onClick = { /* Open settings */ }
        )
    }
)

Spacer(Modifier.width(20.dp))

// --- Example 2: Tooltip with Icon ---
SpatialTooltip(
    title = "User Profile",
    icon = { Icon(SpatialIcons.Regular.Person, null) }, // Icon inside the tooltip
    // Position below the anchor
    alignment = Alignment.BottomCenter,
    offset = IntOffset(0, 10), // Small offset downwards
    anchor = {
        // Any composable can be an anchor
        Box(modifier = Modifier.size(50.dp).background(Color.Gray))
    }
)

Spacer(Modifier.width(20.dp))

// --- Example 3: Simple Title-Only Tooltip ---
SpatialTooltip(
    title = "Add to Favorites",
    anchor = {
        Icon(SpatialIcons.Regular.HeartOutline, null) // Anchor is just an Icon
    }
)


// --- Using SpatialTooltipContent directly (less common) ---
SpatialTooltipContent(
    title = "Status",
    subtitle = "Connected",
    icon = { Icon(SpatialIcons.Regular.CheckCircle, null, tint = Color.Green) }
)

Tooltips enhance usability by providing on-demand information without requiring clicks or navigating away from the current context. Use them for icons without text labels, complex settings, or to offer hints. Keep the tooltip text concise.

Did you find this page helpful?