themed tooltips

modules/Backlight.qml

@@ -42,11 +42,12 @@ M.BarSection {
             root.percent = Math.round((c / m) * 100);
     }
 
-    Text {
+    M.BarIcon {
-        text: root.percent + "% "
+        icon: "\uF185"
-        color: M.Theme.base05
+        anchors.verticalCenter: parent.verticalCenter
-        font.pixelSize: M.Theme.fontSize
+    }
-        font.family: M.Theme.fontFamily
+    M.BarLabel {
+        label: root.percent + "%"
         anchors.verticalCenter: parent.verticalCenter
     }
 

modules/BarIcon.qml

@@ -13,7 +13,7 @@ Text {
     verticalAlignment: Text.AlignVCenter
 
     HoverHandler { id: _hover }
-    ToolTip {
+    M.BarTooltip {
         visible: _hover.hovered && parent.tooltip !== ""
         text: parent.tooltip
     }

modules/BarLabel.qml

@@ -13,7 +13,7 @@ Text {
     verticalAlignment: Text.AlignVCenter
 
     HoverHandler { id: _hover }
-    ToolTip {
+    M.BarTooltip {
         visible: _hover.hovered && parent.tooltip !== ""
         text: parent.tooltip
     }

modules/BarSection.qml

@@ -1,11 +1,11 @@
 import QtQuick
-import QtQuick.Controls
+import "." as M
 
 Row {
     property string tooltip: ""
 
     HoverHandler { id: _hover }
-    ToolTip {
+    M.BarTooltip {
         visible: _hover.hovered && parent.tooltip !== ""
         text: parent.tooltip
     }

modules/BarTooltip.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import QtQuick.Controls
+import "." as M
+
+ToolTip {
+    id: tip
+    padding: 6
+
+    background: Rectangle {
+        color: M.Theme.base01
+        border.color: M.Theme.base03
+        border.width: 1
+        radius: 4
+    }
+
+    contentItem: Text {
+        text: tip.text
+        color: M.Theme.base05
+        font.pixelSize: M.Theme.fontSize
+        font.family: M.Theme.fontFamily
+    }
+}

modules/qmldir

@@ -2,6 +2,7 @@ module modules
 singleton Theme 1.0 Theme.qml
 Bar 1.0 Bar.qml
 BarSection 1.0 BarSection.qml
+BarTooltip 1.0 BarTooltip.qml
 Workspaces 1.0 Workspaces.qml
 WindowTitle 1.0 WindowTitle.qml
 Clock 1.0 Clock.qml