/**
* @output wp-admin/js/wp-tooltip.js
*/
/**
* Add focus and hover support for the 'tooltip' type in `wp_tooltip()`.
* This script can be made obsolete when support is available for Interest Invokers.
*/
(() => {
const supportsPopover = /** @type {boolean} */ ( Object.prototype.hasOwnProperty.call( HTMLElement.prototype, 'popover' ) );
let hidePopover = false;
if ( ! supportsPopover ) {
hidePopover = true;
}
const popovers = /** @type {NodeListOf<HTMLSpanElement>} */ ( document.querySelectorAll( '.wp-is-tooltip' ) );
popovers.forEach( function( popover ) {
const trigger = /** @type {HTMLButtonElement|HTMLAnchorElement|null} */ ( popover.querySelector( '.wp-tooltip__toggle' ) );
const panel = /** @type {HTMLSpanElement|null} */ ( popover.querySelector( 'span.wp-tooltip__bubble' ) );
if ( hidePopover && panel ) {
panel.classList.add( 'hidden' );
return;
}
if ( ! trigger || ! panel ) {
return;
}
/** @type {ReturnType<typeof setTimeout>} */
let openTimeout;
// Show Tooltip Function (with delay to prevent flickering).
const showTooltip = () => {
clearTimeout( openTimeout );
openTimeout = setTimeout( () => {
// Only show if it's not already open.
if ( ! panel.matches( ':popover-open' ) ) {
// pass the triggering element so implicit position anchors work.
panel.showPopover( { source: trigger } );
}
}, 300 );
};
// Hide Tooltip Function.
const hideTooltip = () => {
clearTimeout( openTimeout );
if ( panel.matches( ':popover-open' ) ) {
panel.hidePopover();
}
};
// Bind Hover and Focus Events.
trigger.addEventListener( 'mouseenter', showTooltip );
trigger.addEventListener( 'focus', showTooltip );
trigger.addEventListener( 'mouseleave', hideTooltip );
trigger.addEventListener( 'blur', hideTooltip );
});
})();