Fix the connection status tooltip

CURA-7437

resources/qml/PrinterSelector/MachineSelector.qml

@@ -122,25 +122,36 @@ Cura.ExpandablePopup
                 z: parent.z - 1
             }
 
-            MouseArea // Connection status tooltip hover area
-                {
-                    id: connectionStatusTooltipHoverArea
-                    anchors.fill: parent
-                    hoverEnabled: connectionStatusMessage !== ""
-                    acceptedButtons: Qt.NoButton // react to hover only, don't steal clicks
+        }
 
-                    onEntered:
-                    {
-                        base.showTooltip(
-                            connectionStatusImage,
-                            Qt.point(0, 0),
-                            connectionStatusMessage
-                        ); //todo: positioning
-                        machineSelector.mouseArea.entered() // we want both this and the outer area to be entered
-                    }
-                    onExited: base.hideTooltip()
-                }
+        MouseArea // Connection status tooltip hover area
+        {
+            id: connectionStatusTooltipHoverArea
+            anchors.fill: parent
+            hoverEnabled: connectionStatusMessage !== ""
+            acceptedButtons: Qt.NoButton // react to hover only, don't steal clicks
 
+            onEntered:
+            {
+                machineSelector.mouseArea.entered() // we want both this and the outer area to be entered
+                tooltip.show()
+            }
+            onExited: { tooltip.hide() }
+        }
+
+        Cura.ToolTip
+        {
+            id: tooltip
+
+            width: 250 * screenScaleFactor
+            tooltipText: connectionStatusMessage
+            arrowSize: UM.Theme.getSize("button_tooltip_arrow").width
+            x: connectionStatusImage.x - UM.Theme.getSize("narrow_margin").width
+            y: connectionStatusImage.y + connectionStatusImage.height + UM.Theme.getSize("narrow_margin").height
+            targetPoint: Qt.point(
+                connectionStatusImage.x + Math.round(connectionStatusImage.width / 2),
+                connectionStatusImage.y
+            )
         }
     }
 

resources/qml/ToolTip.qml

@@ -19,6 +19,7 @@ ToolTip
     property int contentAlignment: Cura.ToolTip.ContentAlignment.AlignRight
 
     property alias tooltipText: tooltip.text
+    property alias arrowSize: backgroundRect.arrowSize
     property var targetPoint: Qt.point(parent.x, y + Math.round(height/2))
 
     id: tooltip
@@ -26,6 +27,11 @@ ToolTip
     delay: 500
     font: UM.Theme.getFont("default")
 
+    Behavior on opacity
+    {
+        NumberAnimation { duration: 100; }
+    }
+
     // If the text is not set, just set the height to 0 to prevent it from showing
     height: text != "" ? label.contentHeight + 2 * UM.Theme.getSize("thin_margin").width: 0
 
@@ -60,4 +66,13 @@ ToolTip
         color: UM.Theme.getColor("tooltip_text")
         renderType: Text.NativeRendering
     }
+
+    function show() {
+        visible = true
+        opacity = 1
+    }
+
+    function hide() {
+        opacity = 0
+    }
 }