From 39174ebe5f65348af401ae6c7228b15e888fdef2 Mon Sep 17 00:00:00 2001
From: "Barry vd. Heuvel" <barryvdh@gmail.com>
Date: Thu, 12 Dec 2024 12:11:10 +0100
Subject: [PATCH] Allow tooltip to show as key/value list (#686)

* Allow tooltip to show as key/value list

* Align left
---
 src/DebugBar/Resources/debugbar.css | 16 +++++++++++++++-
 src/DebugBar/Resources/debugbar.js  | 13 +++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/DebugBar/Resources/debugbar.css b/src/DebugBar/Resources/debugbar.css
index 4246ec6..1209dba 100644
--- a/src/DebugBar/Resources/debugbar.css
+++ b/src/DebugBar/Resources/debugbar.css
@@ -251,7 +251,7 @@ a.phpdebugbar-open-btn {
   .phpdebugbar-indicator span.phpdebugbar-tooltip {
     display: none;
     position: absolute;
-    top: -30px;
+    bottom: 30px;
     background: #efefef70;
     border: 1px solid #ccc;
     color: #555;
@@ -268,6 +268,20 @@ a.phpdebugbar-open-btn {
   .phpdebugbar-indicator:hover span.phpdebugbar-tooltip:not(.phpdebugbar-disabled) {
     display: block;
   }
+  .phpdebugbar-indicator span.phpdebugbar-tooltip dl {
+    display: grid;
+    grid-gap: 4px 10px;
+    grid-template-columns: max-content;
+  }
+  .phpdebugbar-indicator span.phpdebugbar-tooltip dl dt {
+    font-weight: bold;
+    text-align: left;
+  }
+  .phpdebugbar-indicator span.phpdebugbar-tooltip dl dd {
+    margin: 0;
+    grid-column-start: 2;
+    text-align: left;
+  }
 
 select.phpdebugbar-datasets-switcher {
   float: right;
diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js
index faddfcf..fa19596 100644
--- a/src/DebugBar/Resources/debugbar.js
+++ b/src/DebugBar/Resources/debugbar.js
@@ -328,7 +328,16 @@ if (typeof(PhpDebugBar) == 'undefined') {
             this.$tooltip = $('<span />').addClass(csscls('tooltip disabled')).appendTo(this.$el);
             this.bindAttr('tooltip', function(tooltip) {
                 if (tooltip) {
-                    this.$tooltip.text(tooltip).removeClass(csscls('disabled'));
+                    var dl = $('<dl />');
+                    if (Array.isArray(tooltip) || typeof tooltip === 'object') {
+                        $.each(tooltip, function(key, value) {
+                            $('<dt />').text(key).appendTo(dl);
+                            $('<dd />').text(value).appendTo(dl);
+                        });
+                        this.$tooltip.html(dl).removeClass(csscls('disabled'));
+                    } else {
+                        this.$tooltip.text(tooltip).removeClass(csscls('disabled'));
+                    }
                 } else {
                     this.$tooltip.addClass(csscls('disabled'));
                 }
@@ -665,7 +674,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
          * @this {DebugBar}
          * @param {String} name Internal name
          * @param {String} icon
-         * @param {String} tooltip
+         * @param {String|Object} tooltip
          * @param {String} position "right" or "left", default is "right"
          * @return {Indicator}
          */