Tooltip

The Tooltip widget displays additional information about its child in a small popup. Use it to explain an icon, describe a control, or provide supporting details without adding permanent text to the page. A tooltip can contain a text message or a custom component.

info

Users can hover over the child with a mouse or use the configured tap or long-press interaction on a touch device. Choose an interaction that works with the child's other actions.

Adding a Tooltip Widget

To add a text tooltip to your app:

1. Right-click the widget that needs a tooltip and select Wrap Widget > Tooltip.
2. Select Tooltip and open the properties panel.
3. Set Tooltip Type to Text, then enter the message under Message > Text. To use a custom layout instead, follow Using a Component.

Customizing

Select the Tooltip widget and open the properties panel to customize its content, behavior, position, and appearance.

Tooltip Content

Use a text message for a short explanation or a component for a custom layout.

Text and Text Styling

Set Tooltip Type to Text and expand Message to configure the message and its appearance:

• Text: Enter the tooltip message, such as Add Card.
• Theme Text Style: Choose a text style from your app's theme.
• Font Family: Choose the font family for the message.
• Font Weight: Choose the text weight, such as 400 - Normal.
• Styling: Apply italic, underline, or strikethrough formatting.
• Font Size and Text Color: Adjust the text size and color.
• Line Height: Adjust the spacing between lines of text.
• Letter Spacing: Adjust the spacing between characters.

Use Text Overflow Replacement to control how text appears when it doesn't fit in the available space. Leave it as Unspecified to use the default overflow behavior.

Using a Component

Use a component to display images, icons, or a custom layout in a tooltip. For example, a shopping app can show a breakdown of customer reviews when users hover over a product rating.

Set Tooltip Type to Component and select the component to display.

Passing a Custom Widget Layout

When you want to reuse a tooltip component with different widget layouts, use a Widget Builder parameter. Use this approach to pass a widget layout into the tooltip component.

1. Create a wrapper component and add a parameter of type Widget Builder.
2. Place the widget builder in the wrapper's widget tree where the custom content belongs.
3. In the Tooltip widget, set Tooltip Type to Component and select the wrapper.
4. Supply the content through the wrapper's widget builder parameter.

Interaction

Trigger Mode

Use Trigger Mode to choose whether a tap or a long press opens the tooltip on touch devices. Test the selected interaction with the child widget's other actions.

Show Tooltip on Focus

Enable Show Tooltip on Focus to display the tooltip when its child receives keyboard focus. Test it with a child that supports keyboard focus, such as an interactive control.

Positioning

Preferred Direction

Set Preferred Direction to Above, Below, Left, or Right to choose where the tooltip appears relative to its target widget.

Tail Size

The tail is the pointer that connects the tooltip to its target. Tail Width sets the width of its base, and Tail Length sets how far it extends toward the target.

Offset

Set Offset to adjust the gap between the tooltip and its target widget.

Appearance

Background Color

Set Background Color to change the tooltip's background.

Border Radius

Set Border Radius to adjust how rounded the tooltip's corners appear.

Elevation

Set Elevation to adjust the tooltip's shadow and apparent depth.

Internal Padding

Set Padding to adjust the space between the tooltip's content and its edges. Use the mode control to set one value for all sides or configure each side separately. To apply the same padding to every side, use the slider or enter a value.

Shadows

Use Shadows to configure individual shadows. Click Add Shadow, then expand the shadow entry to adjust these properties:

• Color: Set the shadow color.
• Blur Radius: Adjust how soft or sharp the shadow appears.
• Offset X: Shift the shadow horizontally.
• Offset Y: Shift the shadow vertically.

To delete a shadow, click Remove on its entry. Use Add Shadow again to add another shadow.

Timing

Wait Duration

Set Wait Duration (ms) to adjust the delay before the tooltip appears. For example, 100 means 100 milliseconds. Test the delay with your chosen trigger mode.

Show Duration

Use Show Duration (ms) to adjust how long the tooltip remains visible after it is triggered. For example, 1500 means 1.5 seconds. Test dismissal with hover, tap, or long press as appropriate for your app.