RichToolTip.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2026 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
pragma ComponentBehavior: Bound
 
import Fluid as MD
import "../core/UiMetrics.js" as UiMetrics
import "../internal/MotionAnimation.js" as MotionAnimation
 
import QtQuick
import QtQuick.Templates as T
 
T.ToolTip {
    id: control
    objectName: "richToolTip"
 
    MD.Style.theme: control.parent ? control.parent.MD.Style.theme : MD.Style.System
 
    property string headline: ""
 
    property alias body: control.text
 
    property list<MD.Action> actions
 
    readonly property int _displayedActionCount: Math.min(actions.length, 2)
    readonly property bool _hasStructuredContent: headline.length > 0
                                                  || _displayedActionCount > 0
    readonly property real _anchorWindowY: parent
                                           ? parent.mapToItem(null, 0, 0).y + parent.y * 0 : 0
    readonly property bool _opensBelow: parent
                                        ? _anchorWindowY - height
                                          - MD.Tokens.toolTip.anchorSpacing
                                          < MD.Tokens.toolTip.viewportMargin : false
    readonly property bool _layoutMirrored: mirrored
                                            || locale.textDirection === Qt.RightToLeft
                                            || (parent && parent.LayoutMirroring.enabled)
    readonly property real _actionNaturalWidth: (_displayedActionCount > 0
                                                 ? firstActionButton.implicitWidth : 0)
                                                + (_displayedActionCount > 1
                                                   ? secondActionButton.implicitWidth : 0)
    readonly property real _naturalContentWidth: Math.max(headlineLabel.implicitWidth,
                                                          bodyLabel.implicitWidth,
                                                          _actionNaturalWidth)
    property Item _previousFocusItem: null
 
    function _rememberFocus() {
        const anchorWindow = control.parent ? control.parent.Window.window : null;
        control._previousFocusItem = anchorWindow ? anchorWindow.activeFocusItem : null;
    }
 
    function _focusFirstAction() {
        if (firstActionButton.visible && firstActionButton.enabled) {
            firstActionButton.forceActiveFocus(Qt.PopupFocusReason);
        } else if (secondActionButton.visible && secondActionButton.enabled) {
            secondActionButton.forceActiveFocus(Qt.PopupFocusReason);
        }
    }
 
    function _restoreFocus() {
        if (control._previousFocusItem)
            control._previousFocusItem.forceActiveFocus(Qt.PopupFocusReason);
        control._previousFocusItem = null;
    }
 
    onActionsChanged: {
        if (actions.length > 2)
            console.warn("RichToolTip supports at most two actions; additional actions are ignored");
    }
    onAboutToShow: control._rememberFocus()
    onOpened: Qt.callLater(control._focusFirstAction)
    onClosed: control._restoreFocus()
 
    x: parent ? (_layoutMirrored ? parent.width - width : 0) : 0
    y: parent ? (_opensBelow
                 ? parent.height + MD.Tokens.toolTip.anchorSpacing
                 : -height - MD.Tokens.toolTip.anchorSpacing) : 0
 
    implicitWidth: Math.max(MD.Tokens.toolTip.minimumWidth,
                            Math.min(MD.Tokens.toolTip.richMaximumWidth,
                                     _naturalContentWidth + leftPadding + rightPadding))
    implicitHeight: Math.max(MD.Tokens.toolTip.minimumHeight, implicitContentHeight)
 
    margins: MD.Tokens.toolTip.viewportMargin
    leftPadding: MD.Tokens.toolTip.richHorizontalPadding
    rightPadding: MD.Tokens.toolTip.richHorizontalPadding
    topPadding: 0
    bottomPadding: 0
    focus: _displayedActionCount > 0
    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutside
    transformOrigin: {
        if (_opensBelow)
            return _layoutMirrored ? Item.TopRight : Item.TopLeft;
        return _layoutMirrored ? Item.BottomRight : Item.BottomLeft;
    }
 
    contentItem: Column {
        id: contentColumn
        objectName: "richToolTipContent"
        width: control.availableWidth
        Accessible.role: Accessible.ToolTip
        Accessible.name: control.headline.length > 0 ? control.headline : control.text
        Accessible.description: control.headline.length > 0 ? control.text : ""
 
        Item {
            id: headlineSlot
            objectName: "richToolTipHeadlineSlot"
            width: parent.width
            height: control.headline.length > 0
                    ? MD.Tokens.toolTip.richHeadlineFirstBaseline
                      + Math.max(0, headlineLabel.implicitHeight
                                  - headlineLabel.baselineOffset) : 0
            visible: control.headline.length > 0
 
            MD.Label {
                id: headlineLabel
                objectName: "richToolTipHeadline"
                y: MD.Tokens.toolTip.richHeadlineFirstBaseline - baselineOffset
                width: parent.width
                text: control.headline
                typescale: MD.Tokens.typescale.titleSmall
                color: control.MD.Style.onSurfaceVariantColor
                horizontalAlignment: control._layoutMirrored ? Text.AlignRight : Text.AlignLeft
                wrapMode: Text.Wrap
                elide: Text.ElideNone
                Accessible.ignored: true
            }
        }
 
        Item {
            id: bodySlot
            objectName: "richToolTipBodySlot"
            width: parent.width
            readonly property real labelY: control._hasStructuredContent
                                           ? MD.Tokens.toolTip.richBodyFirstBaseline
                                             - bodyLabel.baselineOffset
                                           : MD.Tokens.toolTip.plainVerticalPadding
            height: labelY + bodyLabel.implicitHeight
                    + (control._hasStructuredContent
                       ? MD.Tokens.toolTip.richBodyBottomPadding
                       : MD.Tokens.toolTip.plainVerticalPadding)
 
            MD.Label {
                id: bodyLabel
                objectName: "richToolTipBody"
                y: bodySlot.labelY
                width: parent.width
                text: control.text
                typescale: MD.Tokens.typescale.bodyMedium
                color: control.MD.Style.onSurfaceVariantColor
                horizontalAlignment: control._layoutMirrored ? Text.AlignRight : Text.AlignLeft
                wrapMode: Text.Wrap
                elide: Text.ElideNone
                Accessible.ignored: true
            }
        }
 
        Item {
            id: actionSlot
            objectName: "richToolTipActionSlot"
            width: parent.width
            readonly property bool actionsWrap: control._displayedActionCount > 1
                                                && control._actionNaturalWidth > width
            readonly property real actionContentHeight: actionsWrap
                                                        ? firstActionButton.implicitHeight
                                                          + secondActionButton.implicitHeight
                                                        : Math.max(firstActionButton.implicitHeight,
                                                                   secondActionButton.implicitHeight)
            height: control._displayedActionCount > 0
                    ? Math.max(MD.Tokens.toolTip.richActionMinimumHeight, actionContentHeight)
                      + MD.Tokens.toolTip.richActionBottomPadding : 0
            visible: control._displayedActionCount > 0
 
            Flow {
                id: actionFlow
                objectName: "richToolTipActionFlow"
                width: parent.width
                height: actionSlot.height - MD.Tokens.toolTip.richActionBottomPadding
                spacing: 0
                layoutDirection: control._layoutMirrored ? Qt.RightToLeft : Qt.LeftToRight
 
                MD.Button {
                    id: firstActionButton
                    objectName: "richToolTipAction0"
                    width: Math.min(implicitWidth, actionFlow.width)
                    action: control.actions.length > 0 ? control.actions[0] : null
                    type: MD.Button.Text
                    size: MD.Button.ExtraSmall
                    display: MD.Button.TextOnly
                    typescale: MD.Tokens.typescale.labelLarge
                    visible: control._displayedActionCount > 0
                    KeyNavigation.tab: secondActionButton.visible ? secondActionButton : firstActionButton
                    KeyNavigation.backtab: secondActionButton.visible ? secondActionButton : firstActionButton
                    Accessible.role: Accessible.Button
                    Accessible.name: action ? action.text : text
 
                    onClicked: control.close()
                }
 
                MD.Button {
                    id: secondActionButton
                    objectName: "richToolTipAction1"
                    width: Math.min(implicitWidth, actionFlow.width)
                    action: control.actions.length > 1 ? control.actions[1] : null
                    type: MD.Button.Text
                    size: MD.Button.ExtraSmall
                    display: MD.Button.TextOnly
                    typescale: MD.Tokens.typescale.labelLarge
                    visible: control._displayedActionCount > 1
                    KeyNavigation.tab: firstActionButton
                    KeyNavigation.backtab: firstActionButton.visible ? firstActionButton : null
                    Accessible.role: Accessible.Button
                    Accessible.name: action ? action.text : text
 
                    onClicked: control.close()
                }
            }
        }
    }
 
    background: MD.ElevationRectangle {
        objectName: "richToolTipBackground"
        readonly property var containerShape: MD.Tokens.toolTip.richContainerShape
 
        implicitWidth: MD.Tokens.toolTip.minimumWidth
        implicitHeight: MD.Tokens.toolTip.minimumHeight
        color: control.MD.Style.surfaceContainerColor
        topLeftRadius: UiMetrics.resolveShapeRadius(containerShape.topLeft, width, height)
        topRightRadius: UiMetrics.resolveShapeRadius(containerShape.topRight, width, height)
        bottomLeftRadius: UiMetrics.resolveShapeRadius(containerShape.bottomLeft, width, height)
        bottomRightRadius: UiMetrics.resolveShapeRadius(containerShape.bottomRight, width, height)
        elevation: MD.Tokens.toolTip.richContainerElevation
    }
 
    enter: Transition {
        NumberAnimation {
            property: "scale"
            from: MD.Tokens.toolTip.closedScale
            to: 1
            duration: MotionAnimation.expressiveFastSpatialDuration
            easing.type: Easing.BezierSpline
            easing.bezierCurve: MotionAnimation.expressiveFastSpatialCurve
        }
        NumberAnimation {
            property: "opacity"
            from: 0
            to: 1
            duration: MotionAnimation.expressiveFastEffectsDuration
            easing.type: Easing.BezierSpline
            easing.bezierCurve: MotionAnimation.expressiveFastEffectsCurve
        }
    }
 
    exit: Transition {
        NumberAnimation {
            property: "scale"
            from: 1
            to: MD.Tokens.toolTip.closedScale
            duration: MotionAnimation.expressiveFastSpatialDuration
            easing.type: Easing.BezierSpline
            easing.bezierCurve: MotionAnimation.expressiveFastSpatialCurve
        }
        NumberAnimation {
            property: "opacity"
            from: 1
            to: 0
            duration: MotionAnimation.expressiveFastEffectsDuration
            easing.type: Easing.BezierSpline
            easing.bezierCurve: MotionAnimation.expressiveFastEffectsCurve
        }
    }
}