Adding the initial Tooltip

src/js/_enqueues/wp/wp-tooltip.js

@@ -0,0 +1,36 @@
+/**
+ * Tooltip functionality for WordPress.
+ *
+ * @version 6.5.0
+ * @output wp-includes/js/wp-tooltip.js
+ */
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Select all tooltip containers on the page
+    const tooltipContainers = document.querySelectorAll('.tooltip-container');
+
+    tooltipContainers.forEach(function (tooltipContainer) {
+        const tooltipButton = tooltipContainer.querySelector('.tooltip-button');
+        const tooltipContent = tooltipContainer.querySelector('.tooltip-content');
+
+        tooltipButton.addEventListener('click', function () {
+            // 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';
+            }
+        });
+    });
+});

src/wp-includes/css/wp-tooltip.css

@@ -0,0 +1,41 @@
+.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);
+}

src/wp-includes/functions.php

@@ -8890,3 +8890,35 @@ function wp_admin_notice( $message, $args = array() ) {
 
 	echo wp_kses_post( wp_get_admin_notice( $message, $args ) );
 }
+
+/**
+ * Outputs the tooltip for a specific field.
+ *
+ * @since 6.5.0
+ *
+ * @param string $field_id            The unique identifier for the tooltip container.
+ * @param string $tooltip_text        The text content to be displayed in the tooltip.
+ * @param string $tooltip_button_label Optional. The label for the tooltip button. Default is 'Help'.
+ */
+function add_tooltip( $field_id, $tooltip_text, $tooltip_button_label = 'Help' ) {
+	?>
+    <div class="tooltip-container <?php echo esc_attr( $field_id ); ?>">
+        <button type="button" class="tooltip-button" aria-describedby="<?php echo esc_attr( $field_id ); ?>-tooltip" aria-label="<?php echo esc_attr( $tooltip_button_label ); ?>">
+            <span class="dashicons dashicons-editor-help"></span>
+        </button>
+        <div id="<?php echo esc_attr( $field_id ); ?>-tooltip" class="tooltip-content">
+            <div class="tooltip-arrow"></div>
+            <p><?php echo esc_html( $tooltip_text ); ?></p>
+        </div>
+    </div>
+    <?php
+
+	/**
+	 * Enqueues the Styles and Scripts for the Tooltip.
+	 *
+	 * @since 6.5.0
+	 *
+	 */
+    wp_enqueue_style( 'tooltip-style', includes_url( '/css/wp-tooltip.css' ), array(), '1.0' );
+	wp_enqueue_script( 'tooltip-script', includes_url( '/js/wp-tooltip.js' ), array( 'jquery' ), '1.0', true );
+}