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

Place a ToolTip inside any element to show helpful information when hovering over it. The tooltip appears after a short delay and hides when the pointer leaves.

Set the text property for a simple text tooltip, or add a child element instead for custom content.

Each element can contain at most one ToolTip.

Properties

text

string default: ""

The text to display in the tooltip. Don’t set this property when using custom content.

placement

enum ToolTipPlacement default: the first enum value

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.

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.

delay

duration default: 500ms

How long to wait before showing the tooltip after hover begins.

offset

length default: 8px

Space between the tooltip and the pointer or hovered element.

Custom Content

For richer tooltips, omit text and provide your own layout inside a single child element.

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

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

    VerticalLayout {
        alignment: center;

        Button {
            text: "Custom tooltip";

            ToolTip {
                placement: above-element;

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

                    Text {
                        text: "Quick Actions";
                        font-weight: 700;
                        color: #fff;
                    }

                    Text {
                        text: "Open command palette and search settings.";
                        color: #d1d5db;
                        wrap: word-wrap;
                    }

                    HorizontalBox {
                        spacing: 6px;

                        Rectangle {
                            border-radius: 4px;
                            background: #374151;
                            HorizontalBox {
                                padding: 4px;
                                Text { text: "Ctrl"; color: #fff; }
                            }
                        }

                        Rectangle {
                            border-radius: 4px;
                            background: #374151;
                            HorizontalBox {
                                padding: 4px;
                                Text { text: "K"; color: #fff; }
                            }
                        }
                    }
                }
            }
        }
    }
}

slint