Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to customize the attached ToolTip?
Qt 6.11 is out! See what's new in the release blog

How to customize the attached ToolTip?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
tooltip
4 Posts 3 Posters 877 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    alex-zrythm
    wrote on last edited by
    #1

    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):

    Screenshot from 2024-10-17 01-36-45.png

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

    Screenshot from 2024-10-17 02-02-40.png

    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?

    1 Reply Last reply
    0
    • A Offline
      A Offline
      alex-zrythm
      wrote on last edited by
      #2

      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?

      JKSHJ 1 Reply Last reply
      0
      • A alex-zrythm

        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?

        JKSHJ Offline
        JKSHJ Offline
        JKSH
        Moderators
        wrote last edited by
        #3

        @alex-zrythm said in How to customize the attached ToolTip?:

        It seems that my custom tooltip gets used when doing ToolTip {} inside a control, but not when using the attached ToolTip properties.

        Sounds like this issue: https://qt-project.atlassian.net/browse/QTBUG-145576

        The workaround is to call QQuickStyle::setStyle("MyStyle"); in C++ before initializing the QML engine.

        Qt Doc Search for browsers: forum.qt.io/topic/35616/web-browser-extension-for-improved-doc-searches

        GrecKoG 1 Reply Last reply
        1
        • JKSHJ JKSH

          @alex-zrythm said in How to customize the attached ToolTip?:

          It seems that my custom tooltip gets used when doing ToolTip {} inside a control, but not when using the attached ToolTip properties.

          Sounds like this issue: https://qt-project.atlassian.net/browse/QTBUG-145576

          The workaround is to call QQuickStyle::setStyle("MyStyle"); in C++ before initializing the QML engine.

          GrecKoG Offline
          GrecKoG Offline
          GrecKo
          Qt Champions 2018
          wrote last edited by GrecKo
          #4

          @JKSH said in How to customize the attached ToolTip?:

          The workaround is to call QQuickStyle::setStyle("MyStyle"); in C++ before initializing the QML engine.

          And if you have a custom style not entirely compliant with Qt Quick Controls or you don't want to switch all your controls, you can hack it by setting the _q_QQuickToolTip (and _q_shared_QQuickToolTip) property of your QQmlEngine to an instance of your ToolTip before loading your QML files (no guarantee it works in future versions).
          As mentioned in https://qt-project.atlassian.net/browse/QTBUG-107684

          1 Reply Last reply
          1

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved