Why does my Custom QML Tooltip have no background?-CodePudding

I have created a custom tooltip style using this guide:

Why does it not show the blue background rectangle?

I am using Qt6 with PySide6.

*edit:

I have tried using TextMetrics to give the background a width and height. Is this the idiomatic way to do it? It feels like I shouldn't need text metrics. This also leaves the Label uncentered in the background, which looks bad.

import QtQuick.Templates 2.0 as T
import QtQuick
import QtQuick.Controls

T.ToolTip {
    id: ctrl
    contentItem: Label {
        color: "red"
        text: ctrl.text
    }
    background: Rectangle {
        id: bg
        color: "yellow"
        width: tmet.width   5
        height: tmet.height   5
    }
    TextMetrics {
        id: tmet
        font: ctrl.font
        text: ctrl.text
    }
}

CodePudding user response：

Everytime I need to create custom controls I'll look into the QtQuick Basic style. On my machine I can find it here Qt/6.4.0/gcc_64/qml/QtQuick/Controls/Basic/ToolTip.qml

Templates are non-visual implementations of controls' logic and behavior.

You need to set a size on the ToolTip. Look how they are setting the implicitWidth and implicitHeight of the ToolTip.

import QtQuick
import QtQuick.Controls.impl
import QtQuick.Templates as T

T.ToolTip {
    id: control

    x: parent ? (parent.width - implicitWidth) / 2 : 0
    y: -implicitHeight - 3

    implicitWidth: Math.max(implicitBackgroundWidth   leftInset   rightInset,
                            contentWidth   leftPadding   rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight   topInset   bottomInset,
                             contentHeight   topPadding   bottomPadding)

    margins: 6
    padding: 6

    closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent

    contentItem: Text {
        text: control.text
        font: control.font
        wrapMode: Text.Wrap
        color: control.palette.toolTipText
    }

    background: Rectangle {
        border.color: control.palette.dark
        color: control.palette.toolTipBase
    }
}

CodePudding user response：

To set the toolTip text color, it is not necessary to define a custom contentItem Label component. Because this you do it this way, it is not able to size your ToolTip correctly hence I suspect your background has zero dimensions. To set the color with less hack, consider setting it via palette.toolTipText instead. That way, the color is customized as well as you get the correct metrics for your background.

Next, I would not name your custom component ToolTip since that causes ambiguity with the built-in ToolTip component. I would change the name slightly, e.g. MyToolTip so it becomes clear when you're using the custom component over the built-in one.

In the following, you can see that the custom MyToolTip shows with customized colors for, the background rectangle, border, and tooltip text.

import QtQuick
import QtQuick.Controls
Page {
    Button {
        anchors.centerIn: parent
        id: button
        text: "Click me"
        onClicked: {
            console.log("Clicked")
        }
        MyToolTip {
            visible: parent.hovered
            text: "hello world"
        }
    }
}

// MyToolTip.qml
import QtQuick
import QtQuick.Controls
ToolTip {
    palette.toolTipText: "red"
    background: Rectangle {
        color: "lightsteelblue"
        border.color: "yellow"
    }
}

You can Try it Online!