fix: add tooltips to help/close (#203)

Signed-off-by: Henry Schreiner <[email protected]>

Author: henryiii

src/uproot_browser/tui/browser.css

@@ -93,3 +93,39 @@ HelpScreen {
     height: 3;
     background: $surface-lighten-1;
 }
+
+
+HeaderCloseIcon {
+    dock: left;
+    border: none;
+    min-width: 3;
+}
+
+HeaderCloseIcon:hover {
+    background: $panel-lighten-2;
+}
+
+HeaderHelpIcon {
+    dock: right;
+    padding: 0 1;
+    border: none;
+    min-width: 4;
+    content-align: right middle;
+}
+
+HeaderHelpIcon:hover {
+    background: $panel-lighten-2;
+}
+
+HeaderTitle {
+    content-align: center middle;
+    width: 100%;
+}
+
+Header {
+    dock: top;
+    width: 100%;
+    background: $foreground 5%;
+    color: $text;
+    height: 1;
+}

src/uproot_browser/tui/header.py

@@ -7,61 +7,25 @@
 import textual.app
 import textual.reactive
 import textual.widget
+import textual.widgets
 
 if typing.TYPE_CHECKING:
     from .browser import Browser
 
 
-class HeaderCloseIcon(textual.widget.Widget):
-    DEFAULT_CSS = """
-    HeaderCloseIcon {
-        dock: left;
-        padding: 0 1;
-        width: 4;
-        content-align: left middle;
-    }
-    HeaderCloseIcon:hover {
-        background: $panel-lighten-2;
-    }
-    """
-
-    def render(self) -> textual.app.RenderResult:
-        return "❌"
-
+class HeaderCloseIcon(textual.widgets.Button):
     def on_click(self) -> None:
         self.app.exit()
 
 
-class HeaderHelpIcon(textual.widget.Widget):
-    DEFAULT_CSS = """
-    HeaderHelpIcon {
-        dock: right;
-        padding: 0 1;
-        width: 4;
-        content-align: right middle;
-    }
-    HeaderHelpIcon:hover {
-        background: $panel-lighten-2;
-    }
-    """
-
+class HeaderHelpIcon(textual.widgets.Button):
     app: Browser
 
-    def render(self) -> textual.app.RenderResult:
-        return "❓"
-
     def on_click(self) -> None:
         self.app.action_help()
 
 
 class HeaderTitle(textual.widget.Widget):
-    DEFAULT_CSS = """
-    HeaderTitle {
-        content-align: center middle;
-        width: 100%;
-    }
-    """
-
     text = textual.reactive.Reactive("")
     sub_text = textual.reactive.Reactive("")
 
@@ -74,26 +38,16 @@ def render(self) -> textual.app.RenderResult:
 
 
 class Header(textual.widget.Widget):
-    DEFAULT_CSS = """
-    Header {
-        dock: top;
-        width: 100%;
-        background: $foreground 5%;
-        color: $text;
-        height: 1;
-    }
-    """
-
     DEFAULT_CLASSES = ""
 
     def __init__(self, title: str, **kwargs: Any):
         super().__init__(**kwargs)
         self.title = title
 
     def compose(self) -> textual.app.ComposeResult:
-        yield HeaderCloseIcon()
+        yield HeaderCloseIcon("❌", tooltip="Close")
         yield HeaderTitle()
-        yield HeaderHelpIcon()
+        yield HeaderHelpIcon("❓", tooltip="Help")
 
     def on_mount(self) -> None:
         self.query_one(HeaderTitle).text = self.title