diff --git a/src/js/_enqueues/wp/wp-tooltip.js b/src/js/_enqueues/wp/wp-tooltip.js new file mode 100644 index 0000000000000..6f5340d3ca032 --- /dev/null +++ b/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'; + } + }); + }); +}); diff --git a/src/wp-includes/css/wp-tooltip.css b/src/wp-includes/css/wp-tooltip.css new file mode 100644 index 0000000000000..99e13f5138ef6 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/wp-includes/functions.php b/src/wp-includes/functions.php index cb490ee1764fa..9b9898d667a1a 100644 --- a/src/wp-includes/functions.php +++ b/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' ) { + ?> +