fix(compact-bar): make tooltip hints use opaque bg (#4356)

* fix(compact-bar): make tooltip hints use opaque bg

* docs(changelog): add PR

3 files changed, 16 insertions, 5 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 070cbe7f..e2266dc3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 * fix: Zellij Web login issue with safari (https://github.com/zellij-org/zellij/pull/4345)
 * fix: terminal title regression (https://github.com/zellij-org/zellij/pull/4352)
 * fix: resurrection listing regression (https://github.com/zellij-org/zellij/pull/4354)
+* fix: tooltip keybinding backgrounds (https://github.com/zellij-org/zellij/pull/4356)
 
 ## [0.43.0] - 2025-08-05
 * feat: multiple select and bulk pane actions (https://github.com/zellij-org/zellij/pull/4169 and https://github.com/zellij-org/zellij/pull/4171, https://github.com/zellij-org/zellij/pull/4221 and https://github.com/zellij-org/zellij/pull/4286)
diff --git a/default-plugins/compact-bar/src/line.rs b/default-plugins/compact-bar/src/line.rs
index 451cbeb7..089b6ed3 100644
--- a/default-plugins/compact-bar/src/line.rs
+++ b/default-plugins/compact-bar/src/line.rs
@@ -389,7 +389,7 @@ impl RightSideElementsBuilder {
 
     fn create_tooltip_indicator(&self, toggle_key: &str, is_active: bool) -> LinePart {
         let key_text = toggle_key;
-        let key = Text::new(key_text).color_all(3);
+        let key = Text::new(key_text).color_all(3).opaque();
         let ribbon_text = "Tooltip";
         let mut ribbon = Text::new(ribbon_text);
 
diff --git a/default-plugins/compact-bar/src/tooltip.rs b/default-plugins/compact-bar/src/tooltip.rs
index b068b3ed..857b526a 100644
--- a/default-plugins/compact-bar/src/tooltip.rs
+++ b/default-plugins/compact-bar/src/tooltip.rs
@@ -29,7 +29,7 @@ impl<'a> TooltipRenderer<'a> {
                 // if it does
                 if base_x + x + total_element_width > cols {
                     let remaining_space = cols.saturating_sub(base_x + x);
-                    let ellipsis = Text::new("...");
+                    let ellipsis = Text::new("...").opaque();
                     print_text_with_coordinates(
                         ellipsis,
                         base_x + x,
@@ -43,7 +43,7 @@ impl<'a> TooltipRenderer<'a> {
                 print_text_with_coordinates(text, base_x + x, base_y + y, None, None);
                 print_ribbon_with_coordinates(
                     ribbon,
-                    base_x + x + text_width + 1,
+                    base_x + x + text_width,
                     base_y + y,
                     None,
                     None,
@@ -80,15 +80,25 @@ impl<'a> TooltipRenderer<'a> {
         let mut components = Vec::new();
         let mut max_columns = 0;
 
+        let mut is_first = true;
         for (key, description) in actions {
-            let text = Text::new(&key).color_all(3);
+            let text = if is_first {
+                Text::new(format!("{} ", &key)).color_all(3).opaque()
+            } else {
+                Text::new(format!(" {} ", &key)).color_all(3).opaque()
+            };
             let ribbon = Text::new(&description);
 
-            let line_length = key.chars().count() + 1 + description.chars().count();
+            let line_length = if is_first {
+                key.chars().count() + description.chars().count()
+            } else {
+                key.chars().count() + 1 + description.chars().count()
+            };
 
             components.push((text, ribbon, running_x, y));
             running_x += line_length + 5;
             max_columns = max_columns.max(running_x);
+            is_first = false;
         }
 
         let total_rows = 1;