diff --git a/src/js/_enqueues/wp/wp-tooltip.js b/src/js/_enqueues/wp/wp-tooltip.js
index 35a320183240d..1775469989e22 100644
--- a/src/js/_enqueues/wp/wp-tooltip.js
+++ b/src/js/_enqueues/wp/wp-tooltip.js
@@ -42,3 +42,60 @@
trigger.addEventListener( 'blur', hideTooltip );
});
})();
+
+/**
+ * Add focus and hover support for the toggle tip's hint in `wp_get_toggletip()`.
+ *
+ * A toggle tip has no visible text label, so a hover/focus hint exposes the
+ * toggle button's accessible name to sighted users. The hint is suppressed while
+ * the toggle tip dialog itself is open, so the two never overlap.
+ * This script can be made obsolete when support is available for Interest Invokers.
+ */
+(() => {
+
+ const toggletips = document.querySelectorAll( '.wp-is-toggletip' );
+ let openTimeout;
+
+ toggletips.forEach( function( toggletip ) {
+ let trigger = toggletip.querySelector( 'button.wp-tooltip__toggle' );
+ let hint = toggletip.querySelector( '.wp-tooltip__hint' );
+ let dialog = toggletip.querySelector( 'dialog.wp-tooltip__bubble' );
+
+ if ( ! trigger || ! hint ) {
+ return;
+ }
+
+ // Show Hint Function (with delay to prevent flickering).
+ const showHint = () => {
+ clearTimeout( openTimeout );
+ openTimeout = setTimeout( () => {
+ // Don't show the hint over an open toggle tip dialog.
+ if ( dialog && dialog.matches( ':popover-open' ) ) {
+ return;
+ }
+ // Only show if it's not already open.
+ if ( ! hint.matches( ':popover-open' ) ) {
+ // pass the triggering element so implicit position anchors work.
+ hint.showPopover( { source: trigger } );
+ }
+ }, 300 );
+ };
+ // Hide Hint Function.
+ const hideHint = () => {
+ clearTimeout( openTimeout );
+ if ( hint.matches( ':popover-open' ) ) {
+ hint.hidePopover();
+ }
+ };
+
+ // Bind Hover and Focus Events.
+ trigger.addEventListener( 'mouseenter', showHint );
+ trigger.addEventListener( 'focus', showHint );
+
+ trigger.addEventListener( 'mouseleave', hideHint );
+ trigger.addEventListener( 'blur', hideHint );
+
+ // Hide the hint as soon as the toggle tip is opened.
+ trigger.addEventListener( 'click', hideHint );
+ });
+})();
diff --git a/src/wp-admin/css/wp-tooltip.css b/src/wp-admin/css/wp-tooltip.css
index 04ac5cd131ea9..efc6ef8e1d6cf 100644
--- a/src/wp-admin/css/wp-tooltip.css
+++ b/src/wp-admin/css/wp-tooltip.css
@@ -64,7 +64,8 @@
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}
-.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
+.wp-tooltip.wp-is-tooltip .wp-tooltip__bubble,
+.wp-tooltip .wp-tooltip__hint {
background: #000;
color: #f0f0f0;
text-align: center;
@@ -72,7 +73,7 @@
line-height: 1.4;
}
-.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__text {
+.wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint) .wp-tooltip__text {
display: block;
padding-inline-end: 24px;
}
@@ -91,13 +92,14 @@
position-try-fallbacks: flip-block, flip-inline;
}
- .wp-tooltip.wp-is-tooltip .wp-tooltip__bubble {
+ .wp-tooltip.wp-is-tooltip .wp-tooltip__bubble,
+ .wp-tooltip .wp-tooltip__hint {
margin: 0;
}
/* Arrow: gray border (::before) under a white fill (::after). */
- .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before,
- .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
+ .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::before,
+ .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::after {
content: "";
position: absolute;
top: 100%;
@@ -108,12 +110,12 @@
border-bottom: 0;
}
- .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::before {
+ .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::before {
margin-left: -8px;
border-top-color: #c3c4c7;
}
- .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble::after {
+ .wp-tooltip:not(.wp-is-tooltip) .wp-tooltip__bubble:not(.wp-tooltip__hint)::after {
margin-left: -7px;
border-width: 7px;
border-bottom: 0;
diff --git a/src/wp-includes/general-template.php b/src/wp-includes/general-template.php
index 36f3db3beba10..ef374cb72e9e1 100644
--- a/src/wp-includes/general-template.php
+++ b/src/wp-includes/general-template.php
@@ -512,6 +512,9 @@ function wp_get_tooltip_helper( $content, $args = array() ) {
'' .
+ '' .
+ '%7$s' .
+ '' .
'