Add explanation tooltip for composer alias

TODO.md

@@ -90,9 +90,7 @@
 
 - Multiaccount aliases:
   - Warn when conflict with another alias
-  - Add an explanation tooltip
   - Prevent sending messages with a user not in the current room
-  - Support \ escaping
 
 - Accept drag and drop to upload files or set a new avatar 
 - Improve room tooltips, e.g. show last messages

src/gui/Base/HLabeledTextField.qml

@@ -1,21 +1,54 @@
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
 import QtQuick 2.12
-import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
 
-Column {
+HColumnLayout {
     spacing: theme.spacing / 2
 
-    property alias label: fieldLabel
-    property alias field: textField
 
-    HLabel {
+    property alias label: label
-        id: fieldLabel
+    property alias field: field
+    property alias toolTip: toolTip
+
+
+    HRowLayout {
+        HLabel {
+            id: label
+
+            Layout.fillWidth: true
+        }
+
+        HIcon {
+            svgName: "field-tooltip-available"
+            visible: toolTip.text
+
+            Binding on colorize {
+                value: theme.colors.accentElement
+                when: hoverHandler.hovered || toolTip.visible
+            }
+        }
+
+        HoverHandler {
+            id: hoverHandler
+            enabled: toolTip.text
+        }
+
+        TapHandler {
+            onTapped: toolTip.instantShow()
+            enabled: toolTip.text
+        }
+
+        HToolTip {
+            id: toolTip
+            visible: toolTip.text && hoverHandler.hovered
+        }
     }
 
     HTextField {
-        id: textField
+        id: field
         radius: 2
-        width: parent.width
+
+        Layout.fillWidth: true
     }
 }

src/gui/Base/HToolTip.qml

@@ -6,18 +6,9 @@ import QtQuick.Layouts 1.12
 
 ToolTip {
     id: toolTip
-    delay: theme.controls.toolTip.delay
+    delay: instant ? 0 : theme.controls.toolTip.delay
     padding: background.border.width
 
-
-    property alias label: label
-    property alias backgroundColor: background.color
-
-    readonly property bool hideNow: ! window.hovered
-
-    onHideNowChanged: if (visible && hideNow) toolTip.hide()
-
-
     background: Rectangle {
         id: background
         color: theme.controls.toolTip.background
@@ -50,6 +41,25 @@ ToolTip {
         HNumberAnimation { property: "opacity"; to: 0.0 }
     }
 
+    onHideNowChanged: if (visible && hideNow) toolTip.hide()
+
+
+    property bool instant: false
+
+    property alias label: label
+    property alias backgroundColor: background.color
+
+    readonly property bool hideNow: ! window.hovered
+
+
+    function instantShow() {
+        if (visible) return
+        instant = true
+        open()
+        instant = false
+    }
+
+
     TapHandler {
         onTapped: toolTip.hide()
     }

src/gui/Pages/AccountSettings/Profile.qml

@@ -172,9 +172,16 @@ HGridLayout {
                 property bool changed: field.text !== currentAlias
 
                 id: aliasField
-                label.text: qsTr("Write alias:")
+                label.text: qsTr("Multi-account composer alias:")
                 field.onAccepted: applyChanges()
 
+                toolTip.text: qsTr(
+                    "From any account, start a message with specified alias " +
+                    "followed by a space to type and send as this account.\n" +
+                    "This account must a member of the room too.\n" +
+                    "To ignore the alias when typing, prepend it with a space."
+                )
+
                 Component.onCompleted: field.text = currentAlias
 
                 Layout.fillWidth: true

src/icons/thin/field-tooltip-available.svg

@@ -0,0 +1,5 @@
+<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
+    <path d="m-1.6740984.044417h48.0000004v48h-48.0000004z" fill="none"/>
+    <path d="m10 3c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h8l6 6 6-6h8c2.21 0 4-1.79 4-4v-28c0-2.21-1.79-4-4-4zm2.361328 2.7285156h23.277344c1.837282 0 3.326172 1.5242625 3.326172 3.4042964v23.81836c0 1.880035-1.48889 3.402344-3.326172 3.402344h-6.650391l-4.988281 5.105468-4.988281-5.105468h-6.650391c-1.837282 0-3.326172-1.522309-3.326172-3.402344v-23.81836c0-1.8800339 1.48889-3.4042964 3.326172-3.4042964z"/>
+    <path d="m26.689255 30.476144c0 1.38-1.116 2.5-2.499 2.5-1.378 0-2.499-1.12-2.499-2.5s1.121-2.5 2.499-2.5c1.383 0 2.499 1.119 2.499 2.5zm-2.42-21.5000002c-4.029 0-7.06 2.6930012-7.06 8.0000012h3.955c0-2.304.906-4.189 3.024-4.189 1.247 0 2.57.828 2.684 2.411.123 1.666-.767 2.511-1.892 3.582-2.924 2.78-2.816 4.049-2.816 7.196h3.943c0-1.452-.157-2.508 1.838-4.659 1.331-1.436 2.986-3.222 3.021-5.943.047-3.963-2.751-6.3980012-6.697-6.3980012z"/>
+</svg>