ToolTip

import { Button } from "std-widgets.slint";

export component Example inherits Window {
    width: 280px;
    height: 160px;

    VerticalLayout {
        alignment: center;

        Button {
            text: "Hover me";

            ToolTip {
                text: "This is a tooltip";
            }
        }
    }
}

slint

Use ToolTip to show a small popup when the parent element is hovered. The tooltip appears while the mouse is over that parent and hides when the pointer leaves.

The active style provides the visual implementation for text tooltips; this builtin describes the lowered behavior.

You can bind a plain string via text, or build custom content by nesting one root element (such as Rectangle, HorizontalLayout, or VerticalLayout) instead of setting text, and placing the remaining UI inside that root.

A parent may have at most one ToolTip. Multiple sibling ToolTip elements produce a compiler error.

Properties

text

string default: ""

Text rendered by the active style’s tooltip implementation. Setting text means the ToolTip must remain childless because custom markup lives in the single alternate child instead.

Button {
    text: "Save";

    ToolTip {
        text: "Save the current file";
    }
}

slint

placement

enum ToolTipPlacement default: the first enum value

Placement relative to the pointer or hovered element (

ToolTipPlacement

This enum describes where a ToolTip is placed relative to the hovered element.

• pointer: Place the tooltip at the current mouse pointer position.
• above-element: Place the tooltip centered above the hovered element.
• below-element: Place the tooltip centered below the hovered element.
• left-element: Place the tooltip centered left of the hovered element.
• right-element: Place the tooltip centered right of the hovered element.

).

• pointer: anchor using the hover position captured when shown; stays fixed until hidden.
• above-element / below-element / left-element / right-element: anchor centered along the hovered element’s respective outside edge with a spacing gap.

import { Button } from "std-widgets.slint";

export component Example inherits Window {
    width: 280px;
    height: 160px;

    VerticalLayout {
        alignment: center;
        spacing: 24px;

        Button {
            text: "Pointer";

            ToolTip {
                placement: pointer;
                text: "Shown near the cursor when it appears";
            }
        }

        Button {
            text: "Below";

            ToolTip {
                placement: below-element;
                text: "Anchored below the button";
            }
        }
    }
}

slint

delay

duration default: 500ms

Delay before showing the tooltip after hover begins—use larger values when the cursor only glances across controls.

import { Button } from "std-widgets.slint";

export component Example inherits Window {
    width: 280px;
    height: 160px;

    VerticalLayout {
        alignment: center;

        Button {
            text: "Slow tooltip";

            ToolTip {
                delay: 700ms;
                text: "Appears after the pointer rests briefly";
            }
        }
    }
}

slint

offset

length default: 8px

Distance between the tooltip and the pointer/hovered element.

Custom content

When you need richer layout (multiple lines, badges, shortcuts, colors), omit text, provide the single wrapping child, then add backgrounds, padding, and nested layouts yourself. Placement uses that content’s implicit or explicit size.

Note

For custom tooltips, keep exactly one outer element (Rectangle, VerticalLayout, and similar); put every other widget inside it.

import { Button } from "std-widgets.slint";

export component Example inherits Window {
    width: 320px;
    height: 220px;

    VerticalLayout {
        alignment: center;

        Button {
            text: "Custom tooltip";

            ToolTip {
                placement: pointer;

                Rectangle {
                    border-radius: 8px;
                    background: #1f2937;

                    VerticalLayout {
                        padding: 10px;
                        spacing: 6px;

                        Text {
                            text: "Save document";
                            color: #fff;
                            font-weight: 600;
                        }

                        Text {
                            text: "Press the shortcut to save.";
                            color: #d1d5db;
                            wrap: word-wrap;
                        }

                        HorizontalLayout {
                            spacing: 4px;

                            Rectangle {
                                border-radius: 4px;
                                background: #374151;

                                HorizontalLayout {
                                    padding: 4px 6px;
                                    Text { text: "Ctrl"; color: #fff; font-size: 12px; }
                                }
                            }

                            Rectangle {
                                border-radius: 4px;
                                background: #374151;

                                HorizontalLayout {
                                    padding: 4px 6px;
                                    Text { text: "S"; color: #fff; font-size: 12px; }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

slint