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 I can use tooltip for QML component.
Forum Updated to NodeBB v4.3 + New Features

How I can use tooltip for QML component.

Scheduled Pinned Locked Moved QML and Qt Quick
29 Posts 6 Posters 30.7k 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.
  • EddyE Offline
    EddyE Offline
    Eddy
    wrote on last edited by
    #6

    @Xander.

    You're right.

    Here is the link
    "QML Tooltip...":http://doc.qt.digia.com/qtquick-components-symbian-1.1/qml-tooltip.html

    After some more investigating seems it is part of Qt Quick Components for symbian / harmattan.

    My mistake, but on the other hand worth having a look at the sources

    Qt Certified Specialist
    www.edalsolutions.be

    1 Reply Last reply
    0
    • shavS Offline
      shavS Offline
      shav
      wrote on last edited by
      #7

      Hi everyone!

      I still can't find the solution for my problem with tooltip and I've posted the bugreport to "JIRA":https://bugreports.qt-project.org/browse/QTBUG-37968.

      If someone found the solution please post it here.

      Thanks for the help!

      Mac OS and iOS Developer

      1 Reply Last reply
      0
      • EddyE Offline
        EddyE Offline
        Eddy
        wrote on last edited by
        #8

        Hi shaw,

        Did you see my previous post?
        Qt quick components are only available for symbian / harmattan on Qt4.
        You can't use them directly with Qt5 .
        On the other hand, looking at the sources can help you implementing your own.

        Qt Certified Specialist
        www.edalsolutions.be

        1 Reply Last reply
        0
        • shavS Offline
          shavS Offline
          shav
          wrote on last edited by
          #9

          [quote author="Eddy" date="1396165453"]Hi shaw,

          Did you see my previous post?
          Qt quick components are only available for symbian / harmattan on Qt4.
          You can't use them directly with Qt5 .
          On the other hand, looking at the sources can help you implementing your own.
          [/quote]

          Thanks for the reply but I can use the QtQuick Components in my Qt projects. You can use it too if you add to your QML files next lines of code:
          @
          import QtQuick 2.2
          import QtQuick.Controls 1.2 //QtQuick Components
          import QtQuick.Dialogs 1.1 //Dialogs
          import QtQuick.Window 2.0 //Windows
          @

          But I can't use ToolTip component because the current version of QtQuick doesn't supported it. And you are right I can use my own component for show tooltip and I done this for now. But I think in future release of Qt will be grade to see this component.

          Mac OS and iOS Developer

          1 Reply Last reply
          0
          • EddyE Offline
            EddyE Offline
            Eddy
            wrote on last edited by
            #10

            bq. But I think in future release of Qt will be great to see this component.

            Yes there was a lot of interesting stuff in there.
            I think others could be interested in your Tooltip solution. Maybe you could post it here or even make a wiki about it? Thanks.

            Qt Certified Specialist
            www.edalsolutions.be

            1 Reply Last reply
            0
            • shavS Offline
              shavS Offline
              shav
              wrote on last edited by
              #11

              [quote author="Eddy" date="1396168836"]bq. But I think in future release of Qt will be great to see this component.

              Yes there was a lot of interesting stuff in there.
              I think others could be interested in your Tooltip solution. Maybe you could post it here or even make a wiki about it? Thanks.[/quote]

              Hi,

              I want to share my implementation of ToolTip component. This varian doesn't apply to the best implementation but I think for the begin of the tooltip this is a nice solution for me. The code of ToolTip component looks like:
              @
              import QtQuick 2.0
              import QtQuick.Controls 1.1
              import QtGraphicalEffects 1.0

              Item {
              id: toolTipRoot
              height: toolTipContainer.height
              visible: false
              clip: false
              z: 999999999

              property alias text: toolTip.text
              property alias backgroundColor: content.color
              property alias textColor: toolTip.color
              property alias font: toolTip.font
              
              function onMouseHover(x, y)
              {
                  toolTipRoot.x = x;
                  toolTipRoot.y = y + 5;
              }
              
              function onVisibleStatus(flag)
              {
                  toolTipRoot.visible = flag;
              }
              
              Component.onCompleted: {
                  var newObject = Qt.createQmlObject('import QtQuick 2.0; MouseArea {signal mouserHover(int x, int y); signal showChanged(bool flag); anchors.fill:parent; hoverEnabled: true; onPositionChanged: {mouserHover(mouseX, mouseY)} onEntered: {showChanged(true)} onExited:{showChanged(false)}}',
                      toolTipRoot.parent, "mouseItem");
                  newObject.mouserHover.connect(onMouseHover);
                  newObject.showChanged.connect(onVisibleStatus);
              }
              
              Item {
                  id: toolTipContainer
                  width: content.width + toolTipShadow.radius
                  height: content.height + toolTipShadow.radius
              
                  Rectangle {
                      id: content
                      width: toolTipRoot.width
                      height: toolTip.contentHeight + 10
                      radius: 10
              
                      Text {
                          id: toolTip
                          anchors {fill: parent; margins: 5}
                          wrapMode: Text.WrapAnywhere
                      }
                  }
              }
              
              DropShadow {
                  id: toolTipShadow
                  z: toolTipRoot.z
                  anchors.fill: source
                  cached: true
                  horizontalOffset: 4
                  verticalOffset: 4
                  radius: 8.0
                  samples: 16
                  color: "#80000000"
                  smooth: true
                  source: toolTipContainer
              }
              

              }
              @

              The code to use it looks like:
              @
              ToolTip {
              id: tooltip
              width: 300 //default width is 150px. and height is calculate automatically using the text size.
              backgroundColor: "yellow" //set the background color
              textColor: "blue" //set the text colour
              font.pointSize: 18 //You can use all font settings to set custom font.
              text: "Some <b>text</b> <i>here</i>"; //You can use HTML tags in text.
              }
              @

              But Now I have a problem with z-index of tooltip component. I try to understand why z index in my component is not work correctly. If tooltip will show on the login form where both textfields looks like a group you can see the second textfield is overlaps my tooltip. If you optimised this component please post your version here.

              Thanks for the help!

              Mac OS and iOS Developer

              1 Reply Last reply
              0
              • EddyE Offline
                EddyE Offline
                Eddy
                wrote on last edited by
                #12

                Hi,

                Thanks for sharing.

                When you use your tooltip , do you put it as the last part of your dialog?

                Qt Certified Specialist
                www.edalsolutions.be

                1 Reply Last reply
                0
                • shavS Offline
                  shavS Offline
                  shav
                  wrote on last edited by
                  #13

                  [quote author="Eddy" date="1396200453"]Hi,

                  Thanks for sharing.

                  When you use your tooltip , do you put it as the last part of your dialog? [/quote]

                  No, I use it as a part of TextField. Here's how looks like the code of my login dialog (full source code):
                  @
                  import QtQuick 2.2
                  import QtQuick.Controls 1.2
                  import QtQuick.Dialogs 1.1
                  import QtQuick.Window 2.0
                  import QtQuick.Layouts 1.1
                  import QtGraphicalEffects 1.0
                  import com.shav.qtforum 1.0
                  import "../"

                  Window {
                  id: userLoginWindow
                  width: 400
                  height: 150
                  minimumWidth: 400
                  maximumWidth: 400
                  minimumHeight: 150
                  maximumHeight: 150
                  modality: Qt.WindowModal
                  title: "Login"
                  color: "#e8e8e8"

                  property var rootApp: null
                  
                  signal userIsLogIn()
                  
                  function onUserLoginStatus(status)
                  {
                      spinner.running = false;
                  
                      if(status === true)
                      {
                          userLoginWindow.userIsLogIn();
                          userLoginWindow.close();
                      }
                  }
                  
                  Component.onCompleted: {
                      if(rootApp !== null && rootApp.manager !== null)
                      {
                          rootApp.manager.userDidLogin.connect(onUserLoginStatus);
                      }
                  }
                  
                  Rectangle {
                      id: contentView
                      anchors {fill: parent; margins: 10}
                      color: "transparent"
                      clip: true
                  
                      BusyIndicator {
                          id: spinner
                          running: false
                          anchors {left: parent.left; bottom: parent.bottom}
                          width: 30
                          height: 30
                      }
                  
                      Rectangle {
                          id: userLoginSettings
                          width: parent.width
                          height: parent.height - buttonsRow.height - 10
                          color: "transparent"
                          clip: true
                  
                          Column {
                              id: settingsColumn
                              width: parent.width
                              height: parent.height
                              spacing: 5
                  
                              Row {
                                  id: userNameRow
                                  width: parent.width
                                  height: userNameField.height
                                  spacing: 20
                  
                                  Label {
                                      id: userNameLabel
                                      width: 100
                                      height: parent.height
                                      verticalAlignment: Qt.AlignVCenter
                                      text: "Username: "
                                  }
                  
                                  TextField {
                                      id: userNameField
                                      width: parent.width - userNameLabel.width - 20
                                      placeholderText: "Your login name here..."
                  
                                      ToolTip {
                                          id: tooltip
                                          width: 300
                                          backgroundColor: "yellow"
                                          textColor: "blue"
                                          font.pointSize: 18
                                          text: "Some <b>text</b> <i>here</i>";
                                      }
                                  }
                              }
                  
                              Row {
                                  id: userPasswordRow
                                  width: parent.width
                                  height: userPasswordField.height
                                  spacing: 20
                  
                                  Label {
                                      id: userPasswordLabel
                                      width: 100
                                      height: parent.height
                                      verticalAlignment: Qt.AlignVCenter
                                      text: "Password: "
                                  }
                  
                                  TextField {
                                      id: userPasswordField
                                      width: parent.width - userPasswordLabel.width - 20
                                      echoMode: TextInput.Password
                                      placeholderText: "Your password here..."
                                  }
                              }
                  
                              CheckBox {
                                  id: savePassword
                                  checked: true
                                  text: "Keep me logged in for two weeks"
                              }
                          }
                      }
                  
                      Row {
                          id: buttonsRow
                          width: btnClose.width + btnRegister.width + btnLogin.width
                          height: btnClose.height
                          anchors {right: parent.right; top: userLoginSettings.bottom; topMargin: 10}
                  
                          Button {
                              id: btnClose
                              text: "Close"
                              onClicked: {
                                  userLoginWindow.close();
                              }
                          }
                  
                          Button {
                              id: btnRegister
                              text: "Sign Up"
                              onClicked: {
                                  if(rootApp !== null && rootApp.manager !== null)
                                  {
                                      rootApp.manager.getRegistrationHiddenFields();
                                      userLoginWindow.close();
                                  }
                              }
                          }
                  
                          Button {
                              id: btnLogin
                              isDefault: true
                              text: "Login"
                              onClicked: {
                  
                                  if(userNameField.text.length > 0 && userPasswordField.text.length > 0)
                                  {
                                      if(rootApp !== null && rootApp.manager !== null)
                                      {
                                          spinner.running = true;
                                          userLoginWindow.userIsLogIn();
                                          rootApp.manager.login(userNameField.text, userPasswordField.text, savePassword.checked);
                                      }
                                  }
                              }
                          }
                      }
                  }
                  

                  }
                  @

                  Mac OS and iOS Developer

                  1 Reply Last reply
                  0
                  • X Offline
                    X Offline
                    Xander84
                    wrote on last edited by
                    #14

                    The z-index only works for sibling items and the parent, not other items deeper in the item tree and siblings of the parent are not affected by it (sadly), that is why it doesn't work in your code.

                    1 Reply Last reply
                    0
                    • shavS Offline
                      shavS Offline
                      shav
                      wrote on last edited by
                      #15

                      [quote author="Xander84" date="1396201249"]The z-index only works for sibling items and the parent, not other items deeper in the item tree and siblings of the parent are not affected by it (sadly), that is why it doesn't work in your code.[/quote]

                      Thanks for the reply! Well I'll try to fix it and upload a new version here tomorrow.

                      Mac OS and iOS Developer

                      1 Reply Last reply
                      0
                      • X Offline
                        X Offline
                        Xander84
                        wrote on last edited by
                        #16

                        I could publish my Tooltip version later, it a little bit different :D

                        1 Reply Last reply
                        0
                        • shavS Offline
                          shavS Offline
                          shav
                          wrote on last edited by
                          #17

                          It's will be grade!

                          Mac OS and iOS Developer

                          1 Reply Last reply
                          0
                          • X Offline
                            X Offline
                            Xander84
                            wrote on last edited by
                            #18

                            Ok here you go, maybe that is useful for someone.
                            I've created a more dynamic tooltip, so usually they are created from JavaScript and not included in the QML layout directly (but can also be done if needed).

                            Tooltip.qml:
                            @
                            import QtQuick 2.2

                            Rectangle {
                            id: tooltip

                            property alias text: tooltipText.text
                            property alias textItem: tooltipText
                            property int fadeInDelay: 500
                            property int fadeOutDelay: 500
                            property bool autoHide: true
                            property alias autoHideDelay: hideTimer.interval
                            property bool destroyOnHide: true
                            
                            function show() {
                                state = "showing"
                                if (hideTimer.running) {
                                    hideTimer.restart()
                                }
                            }
                            
                            function hide() {
                                if (hideTimer.running) {
                                    hideTimer.stop()
                                }
                                state = "hidden"
                            }
                            
                            width: tooltipText.width + 20
                            height: tooltipText.height + 10
                            color: "#dd000000"
                            radius: 6
                            opacity: 0
                            
                            Text {
                                id: tooltipText
                                anchors.centerIn: parent
                                horizontalAlignment: Text.AlignHCenter
                                color: "white"
                                font.pointSize: 10
                                font.bold: true
                            }
                            
                            MouseArea {
                                anchors.fill: parent
                                onClicked: hide()
                            }
                            
                            Timer {
                                id: hideTimer
                                interval: 5000
                                onTriggered: hide()
                            }
                            
                            states: [
                                State {
                                    name: "showing"
                                    PropertyChanges { target: tooltip; opacity: 1 }
                                    onCompleted: {
                                        if (autoHide) {
                                            hideTimer.start()
                                        }
                                    }
                                },
                                State {
                                    name: "hidden"
                                    PropertyChanges { target: tooltip; opacity: 0 }
                                    onCompleted: {
                                        if (destroyOnHide) {
                                            tooltip.destroy()
                                        }
                                    }
                                }
                            ]
                            
                            transitions: [
                                Transition {
                                    to: "showing"
                                    NumberAnimation { target: tooltip; property: "opacity"; duration: fadeInDelay }
                                },
                                Transition {
                                    to: "hidden"
                                    NumberAnimation { target: tooltip; property: "opacity"; duration: fadeOutDelay }
                                }
                            ]
                            

                            }
                            @
                            The tooltip has a show and hide function to fade it in and out respectively, by default it will destroy itself after it's hidden (the destroyOnHide property can be set to false if you don't want that).

                            Also I have a simple JavaScript file to make it a little easier to create tooltips.

                            TooltipCreator.js
                            @
                            var component = Qt.createComponent("Tooltip.qml");

                            function create(text, parent, properties) {
                            if (typeof properties === "undefined") {
                            properties = {
                            anchors: {
                            horizontalCenter: parent.horizontalCenter,
                            bottom: parent.bottom,
                            bottomMargin: parent.height / 8
                            }
                            };
                            }
                            properties.text = text;
                            var tooltip = component.createObject(parent, properties);
                            if (tooltip === null) {
                            console.error("error creating tooltip: " + component.errorString());
                            } else if (properties.anchors) {
                            // manual anchor mapping necessary
                            for (var anchor in properties.anchors) {
                            tooltip.anchors[anchor] = properties.anchors[anchor];
                            }
                            }
                            return tooltip;
                            }
                            @
                            manual anchor mapping was necessary because it didn't work with Component.createObject properties!? I don't know if that is a bug or an error on my side.

                            so I use that TooltipCreator like this for example:
                            @
                            import "TooltipCreator.js" as TooltipCreator
                            ...
                            TooltipCreator.create("text on the tooltip", parentItem).show()
                            @
                            by default it will fade in, stay visible for 5 seconds and than fade out and destroy itself, the user can click on the tooltip to hide it immediately, also it will be anchored at the bottom center of the provided parent Item (see the TooltipCreator.js)

                            The 3rd optional argument can be used to specify custom properties for the tooltip, e.g.
                            @
                            TooltipCreator.create("absolute positioned tooltip"), rootItem, { x: 100, y: 50 }).show()
                            @
                            or set the properties on the item directly
                            @
                            var tooltip = TooltipCreator.create(qsTr("Network Error!\nPlease check your network connection\nor try again later."), mainView)
                            tooltip.color = "#ddff0000"
                            tooltip.textItem.color = "white"
                            tooltip.show()
                            @

                            I hope that helps, it's not perfect but an easy way to show a simple tooltip I think.

                            1 Reply Last reply
                            0
                            • EddyE Offline
                              EddyE Offline
                              Eddy
                              wrote on last edited by
                              #19

                              Thanks for sharing Xander!

                              Are you interested in putting it in a wiki page ?

                              We can help you with that if you haven't done it yet. Just let us know.

                              BTW : thanks for all your contributions on Devnet. We are really happy having you on board!!!

                              Qt Certified Specialist
                              www.edalsolutions.be

                              1 Reply Last reply
                              0
                              • shavS Offline
                                shavS Offline
                                shav
                                wrote on last edited by
                                #20

                                [quote author="Eddy" date="1396255883"]
                                Are you interested in putting it in a wiki page ?
                                [/quote]

                                Hi,

                                I want to do it but I don't know how I can do it. Could you help me with it. I want to create two version of ToolTip. The one is from the Xander84 and one is a my if you don't mind.

                                The new version of my ToolTip looks like:
                                @
                                import QtQuick 2.0
                                import QtQuick.Controls 1.1
                                import QtGraphicalEffects 1.0

                                Item {
                                id: toolTipRoot
                                width: toolTip.contentWidth
                                height: toolTipContainer.height
                                visible: false
                                clip: false
                                z: 999999999

                                property alias text: toolTip.text
                                property alias radius: content.radius
                                property alias backgroundColor: content.color
                                property alias textColor: toolTip.color
                                property alias font: toolTip.font
                                property var target: null
                                
                                function onMouseHover(x, y)
                                {
                                    var obj = toolTipRoot.target.mapToItem(null, x, y);
                                    toolTipRoot.x = obj.x;
                                    toolTipRoot.y = obj.y;
                                }
                                
                                function onVisibleStatus(flag)
                                {
                                    toolTipRoot.visible = flag;
                                }
                                
                                Component.onCompleted: {
                                    var itemParent = toolTipRoot.target;
                                
                                    var newObject = Qt.createQmlObject('import QtQuick 2.0; MouseArea {signal mouserHover(int x, int y); signal showChanged(bool flag); anchors.fill:parent; hoverEnabled: true; onPositionChanged: {mouserHover(mouseX, mouseY)} onEntered: {showChanged(true)} onExited:{showChanged(false)}}',
                                        itemParent, "mouseItem");
                                    newObject.mouserHover.connect(onMouseHover);
                                    newObject.showChanged.connect(onVisibleStatus);
                                }
                                
                                Item {
                                    id: toolTipContainer
                                    z: toolTipRoot.z + 1
                                    width: content.width + (2*toolTipShadow.radius)
                                    height: content.height + (2*toolTipShadow.radius)
                                
                                    Rectangle {
                                        id: content
                                        anchors.centerIn: parent
                                        width: toolTipRoot.width
                                        height: toolTip.contentHeight + 10
                                        radius: 3
                                
                                        Text {
                                            id: toolTip
                                            anchors {fill: parent; margins: 5}
                                            wrapMode: Text.WrapAnywhere
                                        }
                                    }
                                }
                                
                                DropShadow {
                                    id: toolTipShadow
                                    z: toolTipRoot.z + 1
                                    anchors.fill: source
                                    cached: true
                                    horizontalOffset: 4
                                    verticalOffset: 4
                                    radius: 8.0
                                    samples: 16
                                    color: "#80000000"
                                    smooth: true
                                    source: toolTipContainer
                                }
                                
                                Behavior on visible { NumberAnimation { duration: 200 }}
                                

                                }
                                @

                                I think the Xander84 version looks more standard. And I think it's will be great if other developers could have a more variants of implementation the tooltip.

                                [quote author="Eddy" date="1396255883"]
                                BTW : thanks for all your contributions on Devnet. We are really happy having you on board!!![/quote]

                                Thanks! I'm happy be with you on board. I'll want to thank you for your hard work on Qt.

                                Mac OS and iOS Developer

                                1 Reply Last reply
                                0
                                • EddyE Offline
                                  EddyE Offline
                                  Eddy
                                  wrote on last edited by
                                  #21

                                  bq. I want to do it but I don’t know how I can do it. Could you help me with it.

                                  Have a look at :
                                  "How to add wiki pages":http://qt-project.org/wiki/WikiHelp

                                  PS: let Xander decide on his code, since he's the author.

                                  Qt Certified Specialist
                                  www.edalsolutions.be

                                  1 Reply Last reply
                                  0
                                  • shavS Offline
                                    shavS Offline
                                    shav
                                    wrote on last edited by
                                    #22

                                    Thanks for the link to documentation. I'll check it.

                                    [quote author="Eddy" date="1396263262"]PS: let Xander decide on his code, since he's the author.[/quote]

                                    Sure, I'll wait the Xander answer.

                                    Mac OS and iOS Developer

                                    1 Reply Last reply
                                    0
                                    • X Offline
                                      X Offline
                                      Xander84
                                      wrote on last edited by
                                      #23

                                      hey, sure you can post it on the wiki if you like, feel free to use the code.

                                      maybe I will release some more QML code or apps in the future, actually I just started using QML some month ago and released my first app a week ago, if anybody is interested how it looks on Android: https://play.google.com/store/apps/details?id=ws.aggregator.critiq

                                      and thanks Eddy, I like to contribute to the community :)

                                      1 Reply Last reply
                                      0
                                      • shavS Offline
                                        shavS Offline
                                        shav
                                        wrote on last edited by
                                        #24

                                        Hi,

                                        I've created the wiki page "QtQuick_ToolTip_Component":http://qt-project.org/wiki/QtQuick_ToolTip_Component So please read this and if you found any mistakes let me know by email.

                                        Thanks for the help.

                                        Mac OS and iOS Developer

                                        1 Reply Last reply
                                        0
                                        • EddyE Offline
                                          EddyE Offline
                                          Eddy
                                          wrote on last edited by
                                          #25

                                          @shav

                                          Thanks, i'll have a look at it.

                                          Qt Certified Specialist
                                          www.edalsolutions.be

                                          1 Reply Last reply
                                          0

                                          • Login

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