Adding Tooltip in Admin via only JS and CSS

src/js/_enqueues/admin/common.js

@@ -2245,3 +2245,105 @@ $( function( $ ) {
 	// Expose public methods.
 	return pub;
 })();
+
+/**
+ * Initializes tooltips for elements with the class 'tooltip-container'.
+ *
+ * Dynamically creates tooltip elements and attaches event listeners.
+ * Ensures tooltips are initialized only once.
+ *
+ * @since 6.5.0
+ */
+jQuery(function ($) {
+    var tooltipsInitialized = false;
+
+    /**
+     * Initializes tooltips for elements with the class 'tooltip-container'.
+     *
+     * @since 6.5.0
+     */
+    function initializeTooltips() {
+        // Select all tooltip containers on the page
+        var tooltipContainers = document.querySelectorAll('.tooltip-container');
+
+        tooltipContainers.forEach(function (tooltipContainer) {
+            var tooltipText = tooltipContainer.getAttribute('data-tooltip-text');
+
+            // Check if tooltips are already initialized
+            if (!tooltipsInitialized) {
+                // Create tooltip elements dynamically
+                var tooltipButton = document.createElement('button');
+                tooltipButton.setAttribute('type', 'button');
+                tooltipButton.classList.add('tooltip-button');
+                tooltipButton.innerHTML =
+                    '<span class="dashicons dashicons-editor-help"></span>';
+                tooltipContainer.appendChild(tooltipButton);
+
+                var tooltipContent = document.createElement('div');
+                tooltipContent.classList.add('tooltip-content');
+
+				tooltipContent.innerHTML =
+					'<div class="tooltip-arrow"></div>' + '<p>' + tooltipText + '</p>';
+				tooltipContainer.appendChild(tooltipContent);
+
+                // Change event from click to hover
+                tooltipContainer.addEventListener('mouseenter', function () {
+                    // Show the tooltip content on hover
+                    tooltipContent.style.display = 'block';
+                });
+
+                tooltipContainer.addEventListener('mouseleave', function () {
+                    // Hide the tooltip content on mouse leave
+                    tooltipContent.style.display = 'none';
+                });
+
+                // Set cursor style to 'help' when hovering over the tooltip button
+                tooltipButton.style.cursor = 'help';
+
+                // Add keydown event listener to the tooltip button
+                tooltipButton.addEventListener('keydown', function (event) {
+                    // Check if the Enter key is pressed
+                    if (event.key === 'Enter') {
+                        // Toggle the display of the tooltip content
+                        tooltipContent.style.display =
+                            tooltipContent.style.display === 'block' ? 'none' : 'block';
+                    }
+                });
+
+                document.addEventListener('keydown', function (event) {
+                    if (
+                        event.key === 'Escape' &&
+                        tooltipContent.style.display === 'block'
+                    ) {
+                        // Hide the tooltip on Escape key press
+                        tooltipContent.style.display = 'none';
+                        tooltipButton.focus();
+                    }
+                });
+
+                document.body.addEventListener('click', function (event) {
+                    // Check if the clicked element is not within the tooltip container
+                    if (
+                        !tooltipContent.contains(event.target) &&
+                        !tooltipButton.contains(event.target)
+                    ) {
+                        tooltipContent.style.display = 'none';
+                    }
+                });
+            }
+        });
+
+        // Tooltips have been initialized
+        tooltipsInitialized = true;
+    }
+
+    // Initialize tooltips on DOMContentLoaded
+    $(document).ready(function () {
+        initializeTooltips();
+    });
+
+    // Reinitialize tooltips after AJAX events
+    $(document).ajaxComplete(function () {
+        initializeTooltips();
+    });
+});

src/wp-admin/css/common.css

@@ -1334,6 +1334,48 @@ th.action-links {
 	float: none;
 }
 
+.tooltip-container {
+	position: relative;
+	display: inline-block;
+}
+
+.tooltip-button {
+	background: none;
+	border: none;
+	cursor: pointer;
+}
+
+.tooltip-content {
+	display: none;
+	position: absolute;
+	background-color: #fff;
+	border: 1px solid #ccc;
+	padding: 5px;
+	z-index: 1000;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	border-radius: 5px;
+	width: 150px;
+	text-align: center;
+	top: auto;
+	bottom: 140%;
+	left: 50%;
+	transform: translateX(-50%);
+	margin-top: -10px;
+}
+
+.tooltip-arrow {
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	margin-left: -10px;
+	width: 0;
+	height: 0;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	border-bottom: 10px solid #fff;
+	transform: rotate(180deg) scaleX(-1);
+}
+
 @media only screen and (max-width: 1120px) {
 	.filter-drawer {
 		border-bottom: 1px solid #f0f0f1;