Merge pull request #3490

9d3864b Implement tooltips in multiple pages and components (rating89us)

15 files changed, 143 insertions, 16 deletions

diff --git a/components/AdvancedOptionsItem.qml b/components/AdvancedOptionsItem.qml
index fbafba5d..2f3c095a 100644
--- a/components/AdvancedOptionsItem.qml
+++ b/components/AdvancedOptionsItem.qml
@@ -22,6 +22,7 @@ RowLayout {
         MoneroComponents.Label {
             id: title
             fontSize: 14
+            tooltipIconVisible: true
         }
 
         Rectangle {
diff --git a/components/CheckBox.qml b/components/CheckBox.qml
index 6e120f07..121bbab6 100644
--- a/components/CheckBox.qml
+++ b/components/CheckBox.qml
@@ -48,6 +48,8 @@ Item {
     property int fontSize: 14
     property alias fontColor: label.color
     property bool iconOnTheLeft: true
+    property alias tooltipIconVisible: label.tooltipIconVisible
+    property alias tooltip: label.tooltip
     signal clicked()
 
     height: 25
@@ -121,7 +123,10 @@ Item {
 
     MouseArea {
         anchors.fill: parent
+        hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
+        onEntered: !label.tooltipIconVisible && label.tooltip ? label.tooltipPopup.open() : ""
+        onExited:  !label.tooltipIconVisible && label.tooltip ? label.tooltipPopup.close() : ""
         onClicked: {
             toggle()
         }
diff --git a/components/IconButton.qml b/components/IconButton.qml
index 5d4d8d19..917c5d03 100644
--- a/components/IconButton.qml
+++ b/components/IconButton.qml
@@ -36,19 +36,28 @@ MoneroEffects.ImageMask {
     color: MoneroComponents.Style.defaultFontColor
     image: ""
 
+    property alias tooltip: tooltip.text
     signal clicked(var mouse)
 
+    MoneroComponents.Tooltip {
+        id: tooltip
+        anchors.fill: parent
+        tooltipLeft: true
+    }
+
     MouseArea {
         anchors.fill: parent
         hoverEnabled: true
         cursorShape: Qt.PointingHandCursor
 
         onEntered: {
+            tooltip.text ? tooltip.tooltipPopup.open() : ""
             button.width = button.width + 2
             button.height = button.height + 2
         }
 
         onExited: {
+            tooltip.text ? tooltip.tooltipPopup.close() : ""
             button.width = button.width - 2
             button.height = button.height - 2
         }
diff --git a/components/InlineButton.qml b/components/InlineButton.qml
index e493a67a..8e0d278b 100644
--- a/components/InlineButton.qml
+++ b/components/InlineButton.qml
@@ -46,6 +46,9 @@ Item {
     property alias fontStyleName: inlineText.font.styleName
     property bool isFontAwesomeIcon: fontFamily == FontAwesome.fontFamily || fontFamily == FontAwesome.fontFamilySolid
     property alias buttonColor: rect.color
+    property alias tooltip: tooltip.text
+    property alias tooltipLeft: tooltip.tooltipLeft
+    property alias tooltipBottom: tooltip.tooltipBottom
 
     height: isFontAwesomeIcon ? 30 : 24
     width: isFontAwesomeIcon ? height : inlineText.width + 16
@@ -82,6 +85,11 @@ Item {
             }
         }
 
+        MoneroComponents.Tooltip {
+            id: tooltip
+            anchors.fill: parent
+        }
+
         MouseArea {
             id: buttonArea
             cursorShape: rect.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
@@ -89,10 +97,12 @@ Item {
             anchors.fill: parent
             onClicked: doClick()
             onEntered: {
+                tooltip.text ? tooltip.tooltipPopup.open() : ""
                 rect.color = buttonColor ? buttonColor : "#707070";
                 rect.opacity = 0.8;
             }
             onExited: {
+                tooltip.text ? tooltip.tooltipPopup.close() : ""
                 rect.opacity = 1.0;
                 rect.color = buttonColor ? buttonColor : "#808080";
             }
diff --git a/components/Label.qml b/components/Label.qml
index 94e7ed4a..261c02a5 100644
--- a/components/Label.qml
+++ b/components/Label.qml
@@ -35,6 +35,7 @@ Item {
     id: item
     property alias text: label.text
     property alias tooltip: label.tooltip
+    property alias tooltipIconVisible: label.tooltipIconVisible
     property alias color: label.color
     property int textFormat: Text.PlainText
     property string tipText: ""
diff --git a/components/RemoteNodeList.qml b/components/RemoteNodeList.qml
index f8500d45..2e9c36f4 100644
--- a/components/RemoteNodeList.qml
+++ b/components/RemoteNodeList.qml
@@ -112,6 +112,8 @@ ColumnLayout {
                         fontFamily: FontAwesome.fontFamily
                         fontPixelSize: 18
                         text: FontAwesome.edit
+                        tooltip: qsTr("Edit remote node") + translationManager.emptyString
+                        tooltipLeft: true
                         onClicked: remoteNodeDialog.edit(remoteNodesModel.get(index), function (remoteNode) {
                             remoteNodesModel.set(index, remoteNode)
                         })
@@ -122,6 +124,8 @@ ColumnLayout {
                         fontFamily: FontAwesome.fontFamily
                         text: FontAwesome.times
                         visible: remoteNodesModel.count > 1
+                        tooltip: qsTr("Remove remote node") + translationManager.emptyString
+                        tooltipLeft: true
                         onClicked: remoteNodesModel.removeSelectNextIfNeeded(index)
                     }
                 }
diff --git a/components/StandardButton.qml b/components/StandardButton.qml
index d26d9aa8..d77e611f 100644
--- a/components/StandardButton.qml
+++ b/components/StandardButton.qml
@@ -52,6 +52,9 @@ Item {
         else return 16;
     }
     property alias label: label
+    property alias tooltip: tooltip.text
+    property alias tooltipLeft: tooltip.tooltipLeft
+    property alias tooltipPopup: tooltip.tooltipPopup
     signal clicked()
 
     height: small ?  30 : 36
@@ -161,11 +164,18 @@ Item {
         }
     }
 
+    MoneroComponents.Tooltip {
+        id: tooltip
+        anchors.fill: parent
+    }
+
     MouseArea {
         id: buttonArea
         anchors.fill: parent
         hoverEnabled: true
         onClicked: doClick()
+        onEntered: tooltip.text ? tooltip.tooltipPopup.open() : ""
+        onExited: tooltip.text ? tooltip.tooltipPopup.close() : ""
         cursorShape: Qt.PointingHandCursor
     }
 
diff --git a/components/TextPlain.qml b/components/TextPlain.qml
index 822f86a2..1dfe32fd 100644
--- a/components/TextPlain.qml
+++ b/components/TextPlain.qml
@@ -13,6 +13,9 @@ Text {
     property string themeTransitionBlackColor: ""
     property string themeTransitionWhiteColor: ""
     property alias tooltip: tooltip.text
+    property alias tooltipLeft: tooltip.tooltipLeft
+    property alias tooltipIconVisible: tooltip.tooltipIconVisible
+    property alias tooltipPopup: tooltip.tooltipPopup
     font.family: MoneroComponents.Style.fontMedium.name
     font.bold: false
     font.pixelSize: 14
@@ -30,6 +33,6 @@ Text {
     MoneroComponents.Tooltip {
         id: tooltip
         anchors.top: parent.top
-        anchors.left: parent.right
+        anchors.left: tooltipIconVisible ? parent.right : parent.left
     }
 }
diff --git a/components/TitleBar.qml b/components/TitleBar.qml
index 2378a388..27d4fe29 100644
--- a/components/TitleBar.qml
+++ b/components/TitleBar.qml
@@ -110,12 +110,24 @@ Rectangle {
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: btnCloseWalletTooltip
+                anchors.fill: parent
+                text: qsTr("Close this wallet and return to main menu") + translationManager.emptyString
+            }
+
             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                onExited: parent.color = "transparent"
+                onEntered: {
+                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                    btnCloseWalletTooltip.tooltipPopup.open()
+                }
+                onExited: {
+                    parent.color = "transparent"
+                    btnCloseWalletTooltip.tooltipPopup.close()
+                }
                 onClicked: root.closeWalletClicked(leftPanel.visible)
             }
         }
@@ -138,12 +150,24 @@ Rectangle {
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: btnLanguageToggleTooltip
+                anchors.fill: parent
+                text: qsTr("Change language") + translationManager.emptyString
+            }
+
             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                onExited: parent.color = "transparent"
+                onEntered: {
+                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                    btnLanguageToggleTooltip.tooltipPopup.open()
+                }
+                onExited: {
+                    parent.color = "transparent"
+                    btnLanguageToggleTooltip.tooltipPopup.close()
+                }
                 onClicked: root.languageClicked()
             }
         }
@@ -165,12 +189,24 @@ Rectangle {
                 opacity: 0.75
             }
 
+            MoneroComponents.Tooltip {
+                id: btnSwitchThemeTooltip
+                anchors.fill: parent
+                text: MoneroComponents.Style.blackTheme ? qsTr("Switch to light theme") : qsTr("Switch to dark theme") + translationManager.emptyString
+            }
+
             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 cursorShape: Qt.PointingHandCursor
-                onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
-                onExited: parent.color = "transparent"
+                onEntered: {
+                    parent.color = MoneroComponents.Style.titleBarButtonHoverColor
+                    btnSwitchThemeTooltip.tooltipPopup.open()
+                }
+                onExited: {
+                    parent.color = "transparent"
+                    btnSwitchThemeTooltip.tooltipPopup.close()
+                }
                 onClicked: {
                     MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
                 }
diff --git a/components/Tooltip.qml b/components/Tooltip.qml
index 31cd0b25..b33d90ef 100644
--- a/components/Tooltip.qml
+++ b/components/Tooltip.qml
@@ -35,14 +35,19 @@ import "." as MoneroComponents
 
 Rectangle {
     property alias text: tooltip.text
+    property alias tooltipPopup: popup
+    property bool tooltipIconVisible: false
+    property bool tooltipLeft: false
+    property bool tooltipBottom: tooltipIconVisible ? false : true
 
     color: "transparent"
-    height: icon.height
-    width: icon.width
+    height: tooltipIconVisible ? icon.height : parent.height
+    width: tooltipIconVisible ? icon.width : parent.width
     visible: text != ""
 
     Text {
         id: icon
+        visible: tooltipIconVisible
         color: MoneroComponents.Style.orange
         font.family: FontAwesome.fontFamily
         font.pixelSize: 10
@@ -62,8 +67,9 @@ Rectangle {
         }
     }
 
-    Popup {
+    ToolTip {
         id: popup
+        height: tooltip.height + 20
 
         background: Rectangle {
             border.color: MoneroComponents.Style.buttonInlineBackgroundColor
@@ -73,8 +79,20 @@ Rectangle {
         }
         closePolicy: Popup.NoAutoClose
         padding: 10
-        x: icon.x + icon.width
-        y: icon.y - height
+        x: tooltipLeft
+            ? (tooltipIconVisible ? icon.x - icon.width : parent.x - tooltip.width - 20 + parent.width/2)
+            : (tooltipIconVisible ? icon.x + icon.width : parent.x + parent.width/2)
+        y: tooltipBottom
+            ? (tooltipIconVisible ? icon.y + height : parent.y + parent.height + 2)
+            : (tooltipIconVisible ? icon.y - height : parent.y - tooltip.height - 20)
+        enter: Transition {
+            NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 150 }
+        }
+
+        exit: Transition {
+            NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 150 }
+        }
+        delay: 200
 
         RowLayout {
             Text {
diff --git a/pages/Account.qml b/pages/Account.qml
index 0a549163..56e3dd50 100644
--- a/pages/Account.qml
+++ b/pages/Account.qml
@@ -304,6 +304,7 @@ Rectangle {
                                 opacity: 0.5
                                 Layout.preferredWidth: 23
                                 Layout.preferredHeight: 21
+                                tooltip: qsTr("Edit account label") + translationManager.emptyString
 
                                 onClicked: pageAccount.renameSubaddressAccountLabel(index);
                             }
@@ -317,6 +318,7 @@ Rectangle {
                                 opacity: 0.5
                                 Layout.preferredWidth: 16
                                 Layout.preferredHeight: 21
+                                tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString
 
                                 onClicked: {
                                     console.log("Address copied to clipboard");
diff --git a/pages/AddressBook.qml b/pages/AddressBook.qml
index 7d28ba02..275a5a93 100644
--- a/pages/AddressBook.qml
+++ b/pages/AddressBook.qml
@@ -210,6 +210,7 @@ Rectangle {
                                 opacity: 0.5
                                 Layout.preferredWidth: 20
                                 Layout.preferredHeight: 20
+                                tooltip: qsTr("Send to this address") + translationManager.emptyString
                                 onClicked: {
                                     doSend();
                                 }
@@ -222,6 +223,7 @@ Rectangle {
                                 opacity: 0.5
                                 Layout.preferredWidth: 23
                                 Layout.preferredHeight: 21
+                                tooltip: qsTr("Edit address label") + translationManager.emptyString
 
                                 onClicked: {
                                     addressBookListView.currentIndex = index;
@@ -236,6 +238,7 @@ Rectangle {
                                 Layout.preferredHeight: 21
                                 color: MoneroComponents.Style.defaultFontColor
                                 opacity: 0.5
+                                tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString
 
                                 onClicked: {
                                     console.log("Address copied to clipboard");
diff --git a/pages/History.qml b/pages/History.qml
index e5635336..03d30c5e 100644
--- a/pages/History.qml
+++ b/pages/History.qml
@@ -958,6 +958,8 @@ Rectangle {
                                     label.font.family: FontAwesome.fontFamily
                                     fontSize: 18
                                     width: 34
+                                    tooltip: qsTr("Transaction details") + translationManager.emptyString
+                                    tooltipLeft: true
 
                                     MouseArea {
                                         state: "details"
@@ -965,8 +967,14 @@ Rectangle {
                                         hoverEnabled: true
                                         z: parent.z + 1
 
-                                        onEntered: parent.opacity = 0.8;
-                                        onExited: parent.opacity = 1.0;
+                                        onEntered: {
+                                            parent.opacity = 0.8;
+                                            parent.tooltipPopup.open()
+                                        }
+                                        onExited: {
+                                            parent.opacity = 1.0;
+                                            parent.tooltipPopup.close()
+                                        }
                                     }
                                 }
 
@@ -988,6 +996,8 @@ Rectangle {
                                     label.font.family: FontAwesome.fontFamilyBrands
                                     fontSize: 18
                                     width: 34
+                                    tooltip: qsTr("Generate payment proof") + translationManager.emptyString
+                                    tooltipLeft: true
 
                                     MouseArea {
                                         state: "proof"
@@ -995,8 +1005,14 @@ Rectangle {
                                         hoverEnabled: true
                                         z: parent.z + 1
 
-                                        onEntered: parent.opacity = 0.8;
-                                        onExited: parent.opacity = 1.0;
+                                        onEntered: {
+                                            parent.opacity = 0.8;
+                                            parent.tooltipPopup.open()
+                                        }
+                                        onExited: {
+                                            parent.opacity = 1.0;
+                                            parent.tooltipPopup.close()
+                                        }
                                     }
                                 }
                             }
diff --git a/pages/Receive.qml b/pages/Receive.qml
index a572e397..abf5165f 100644
--- a/pages/Receive.qml
+++ b/pages/Receive.qml
@@ -203,6 +203,7 @@ Rectangle {
                                 Layout.preferredWidth: 23
                                 Layout.preferredHeight: 21
                                 visible: index !== 0
+                                tooltip: qsTr("Edit address label") + translationManager.emptyString
 
                                 onClicked: {
                                     renameSubaddressLabel(index);
@@ -218,6 +219,7 @@ Rectangle {
                                 opacity: 0.5
                                 Layout.preferredWidth: 16
                                 Layout.preferredHeight: 21
+                                tooltip: qsTr("Copy address to clipboard") + translationManager.emptyString
 
                                 onClicked: {
                                     console.log("Address copied to clipboard");
diff --git a/pages/Transfer.qml b/pages/Transfer.qml
index 589cf374..5767c951 100644
--- a/pages/Transfer.qml
+++ b/pages/Transfer.qml
@@ -277,6 +277,7 @@ Rectangle {
                             fontStyleName: "Solid"
                             fontPixelSize: 18
                             text: FontAwesome.desktop
+                            tooltip: qsTr("Grab QR code from screen") + translationManager.emptyString
                             onClicked: {
                                 clearFields();
                                 const codes = oshelper.grabQrCodesFromScreen();
@@ -295,6 +296,7 @@ Rectangle {
                             fontStyleName: "Solid"
                             text: FontAwesome.qrcode
                             visible: appWindow.qrScannerEnabled
+                            tooltip: qsTr("Scan QR code") + translationManager.emptyString
                             onClicked: {
                                 cameraUi.state = "Capture"
                                 cameraUi.qrcode_decoded.connect(updateFromQrCode)
@@ -304,6 +306,7 @@ Rectangle {
                         MoneroComponents.InlineButton {
                             fontFamily: FontAwesome.fontFamily
                             text: FontAwesome.addressBook
+                            tooltip: qsTr("Import from address book") + translationManager.emptyString
                             onClicked: {
                                 middlePanel.addressBookView.selectAndSend = true;
                                 appWindow.showPageRequest("AddressBook");
@@ -483,12 +486,16 @@ Rectangle {
                                 horizontalAlignment: Text.AlignHCenter
                                 opacity: mouseArea.containsMouse ? 1 : 0.85
                                 text: recipientModel.count == 1 ? FontAwesome.infinity : FontAwesome.times
+                                tooltip: recipientModel.count == 1 ? qsTr("Send all unlocked balance of this account") : qsTr("Remove recipient")  + translationManager.emptyString
+                                tooltipLeft: true
 
                                 MouseArea {
                                     id: mouseArea
                                     anchors.fill: parent
                                     cursorShape: Qt.PointingHandCursor
                                     hoverEnabled: true
+                                    onEntered: parent.tooltipPopup.open()
+                                    onExited: parent.tooltipPopup.close()
                                     onClicked: {
                                         if (recipientModel.count == 1) {
                                             parent.parent.children[2].text = "(all)";