How to customize the attached ToolTip?

alex-zrythm · wrote on 16 Oct 2024, 17:06

I want to create a customized attached tooltip but I can't figure it out. I created my own style (as the docs suggest), verified my style gets used, and I also included a ToolTip and Popup implementation in my style.

See CMake:

qt_add_qml_module(zrythm_style
  URI ZrythmStyle
  VERSION 1.0
  OUTPUT_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/ZrythmStyle
#  most of these copied from Qt's Basic style and edited to remove/replace private controls
  QML_FILES
    ZrythmStyle/ApplicationWindow.qml
    ZrythmStyle/Action.qml
    ZrythmStyle/BusyIndicator.qml
    ZrythmStyle/Button.qml
    ZrythmStyle/ComboBox.qml
    ZrythmStyle/DialogButtonBox.qml
    ZrythmStyle/Dialog.qml
    ZrythmStyle/Label.qml
    ZrythmStyle/ItemDelegate.qml
    ZrythmStyle/Menu.qml
    ZrythmStyle/MenuBar.qml
    ZrythmStyle/MenuBarItem.qml
    ZrythmStyle/MenuSeparator.qml
    ZrythmStyle/MenuItem.qml
    ZrythmStyle/Overlay.qml
    ZrythmStyle/Page.qml
    ZrythmStyle/PageIndicator.qml
    ZrythmStyle/Pane.qml
    ZrythmStyle/Popup.qml
    ZrythmStyle/RoundButton.qml
    ZrythmStyle/ProgressBar.qml
    ZrythmStyle/ScrollBar.qml
    ZrythmStyle/ScrollIndicator.qml
    ZrythmStyle/ScrollView.qml
    ZrythmStyle/SwipeView.qml
    ZrythmStyle/SplitView.qml
    ZrythmStyle/StackView.qml
    ZrythmStyle/TabBar.qml
    ZrythmStyle/TabButton.qml
    ZrythmStyle/TextField.qml
    ZrythmStyle/ToolBar.qml
    ZrythmStyle/ToolButton.qml
    ZrythmStyle/ToolSeparator.qml
    ZrythmStyle/ToolTip.qml # tooltip here
    ZrythmStyle/Style.qml
)

I tried for example doing this in my RoundButton implementation:

import QtQuick
import QtQuick.Templates as T

T.RoundButton {
    id: control

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

// most of the implemenation copied from Qt's Basic implementation

    T.ToolTip.text: control.text
    T.ToolTip.visible: true
    T.ToolTip.timeout: 5000000
}

I made the background of my tooltip grey:

import QtQuick
import QtQuick.Templates as T

T.ToolTip {
    id: control

    x: parent ? (parent.width - width) / 2 : 0
    y: -height - 10

    implicitWidth: 100
    implicitHeight: 40

//...
    contentItem: Text {
        text: "TEST" //control.text
        font: control.font
        color: Style.tooltipTextColor
        wrapMode: Text.Wrap
    }

    background: Rectangle {
        color: "grey"
        border.color: Style.tooltipBorderColor
        radius: Style.tooltipRadius
        opacity: 0.95
    }

//  ...

But it always shows as a rectangle with a white background, and I have no idea what these controls are that it uses. Screenshot from GammaRay (tooltip at the bottom of the screen):

Without GammaRay (ignore the white text on white background for the RoundButton, that's irrelevant here):

My qtquickcontrols2.conf:

[Controls]
Style=ZrythmStyle

The documentation around theming the ToolTip and even around creating your own theme is poor, and I can't find examples online. My RoundButton and other implementations do seem to get used so I assume my theme is working properly. What am I doing wrong?

alex-zrythm · wrote on 17 Oct 2024, 17:46

It seems that my custom tooltip gets used when doing ToolTip {} inside a control, but not when using the attached ToolTip properties. I guess it's just not implemented yet, regardless what the docs suggest? Has anyone successfully styled the attached ToolTip?