How to customize the attached ToolTip?
-
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?
-
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?