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?
QtWS25 Last Chance

How to customize the attached ToolTip?

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
tooltip
2 Posts 1 Posters 270 Views
  • 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 16 Oct 2024, 17:06 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 17 Oct 2024, 17:46 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?

      1 Reply Last reply
      0

      1/2

      16 Oct 2024, 17:06

      • Login

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