Add a Cura Tooltip to show in some buttons

Contributes to CURA-6004.

resources/qml/ActionButton.qml

@@ -16,7 +16,7 @@ Button
     property alias iconSource: buttonIconLeft.source
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
-    property alias tooltip: tooltip.text
+    property alias tooltip: tooltip.tooltipText
     property alias cornerSide: backgroundRect.cornerSide
 
     property color color: UM.Theme.getColor("primary")
@@ -109,11 +109,9 @@ Button
         z: backgroundRect.z - 1
     }
 
-    ToolTip
+    Cura.ToolTip
     {
         id: tooltip
-        text: ""
-        delay: 500
-        visible: text != "" && button.hovered
+        show: button.hovered
     }
 }

resources/qml/ActionPanel/OutputDevicesActionButton.qml

@@ -55,7 +55,6 @@ Item
 
         leftPadding: UM.Theme.getSize("narrow_margin").width //Need more space than usual here for wide text.
         rightPadding: UM.Theme.getSize("narrow_margin").width
-        tooltip: popup.opened ? "" : catalog.i18nc("@info:tooltip", "Select the active output device")
         iconSource: popup.opened ? UM.Theme.getIcon("arrow_top") : UM.Theme.getIcon("arrow_bottom")
         color: UM.Theme.getColor("action_panel_secondary")
         visible: (devicesModel.deviceCount > 1)

resources/qml/ActionPanel/SliceProcessWidget.qml

@@ -109,6 +109,7 @@ Column
             fixedWidthMode: true
             anchors.fill: parent
             text: catalog.i18nc("@button", "Slice")
+            tooltip: "Start slicing process"
             enabled: widget.backendState != UM.Backend.Error
             visible: widget.backendState == UM.Backend.NotStarted || widget.backendState == UM.Backend.Error
             onClicked: sliceOrStopSlicing()

resources/qml/PrintSetupTooltip.qml

@@ -2,9 +2,7 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.3
 
 import UM 1.0 as UM
 
@@ -57,5 +55,6 @@ UM.PointingRectangle {
         textFormat: Text.RichText
         font: UM.Theme.getFont("default");
         color: UM.Theme.getColor("tooltip_text");
+        renderType: Text.NativeRendering
     }
 }

resources/qml/ToolTip.qml

@@ -0,0 +1,43 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.3
+
+import UM 1.0 as UM
+
+ToolTip
+{
+    // This property indicates when the tooltip has to show, for instance when a button is hovered
+    property bool show: false
+
+    property alias tooltipText: tooltip.text
+    property var targetPoint: Qt.point(0, 0)
+
+    id: tooltip
+    text: ""
+    delay: 500
+    visible: text != "" && show
+    font: UM.Theme.getFont("default")
+
+    background: UM.PointingRectangle
+    {
+        id: backgroundRect
+        color: UM.Theme.getColor("tooltip")
+
+        target: Qt.point(targetPoint.x - tooltip.x, targetPoint.y - tooltip.y)
+
+        arrowSize: UM.Theme.getSize("default_arrow").width
+    }
+
+    contentItem: Label
+    {
+        id: label
+        text: tooltip.text
+        font: tooltip.font
+        wrapMode: Text.Wrap
+        textFormat: Text.RichText
+        color: UM.Theme.getColor("tooltip_text")
+        renderType: Text.NativeRendering
+    }
+}

resources/qml/ToolbarButton.qml

@@ -96,4 +96,11 @@ Button
             height: UM.Theme.getSize("button_icon").height
         }
     }
+
+    Cura.ToolTip
+    {
+        id: tooltip
+        tooltipText: base.text
+        show: base.hovered
+    }
 }

resources/qml/qmldir

@@ -14,4 +14,5 @@ PrinterTypeLabel 1.0 PrinterTypeLabel.qml
 ViewsSelector 1.0 ViewsSelector.qml
 ToolbarButton 1.0 ToolbarButton.qml
 SettingView 1.0 SettingView.qml
-ProfileMenu 1.0 ProfileMenu.qml
+ProfileMenu 1.0 ProfileMenu.qml
+ToolTip 1.0 ToolTip.qml

resources/themes/cura-light/theme.json

@@ -240,7 +240,7 @@
         "checkbox_disabled": [223, 223, 223, 255],
         "checkbox_text": [35, 35, 35, 255],
 
-        "tooltip": [68, 192, 255, 255],
+        "tooltip": [19, 19, 19, 255],
         "tooltip_text": [255, 255, 255, 255],
 
         "tool_button_border": [255, 255, 255, 0],