[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/wp-tooltip.js
   3   */
   4  
   5  /**
   6   * Add focus and hover support for the 'tooltip' type in `wp_tooltip()`.
   7   * This script can be made obsolete when support is available for Interest Invokers.
   8   */
   9  (() => {
  10  
  11      const popovers = /** @type {NodeListOf<HTMLSpanElement>} */ ( document.querySelectorAll( '.wp-is-tooltip' ) );
  12  
  13      /** @type {ReturnType<typeof setTimeout>} */
  14      let openTimeout;
  15  
  16      popovers.forEach( function( popover ) {
  17          const trigger = /** @type {HTMLButtonElement|HTMLAnchorElement|null} */ ( popover.querySelector( '.wp-tooltip__toggle' ) );
  18          const panel   = /** @type {HTMLSpanElement|null} */ ( popover.querySelector( 'span.wp-tooltip__bubble' ) );
  19  
  20          if ( ! trigger || ! panel ) {
  21              return;
  22          }
  23  
  24          // Show Tooltip Function (with delay to prevent flickering).
  25          const showTooltip = () => {
  26              clearTimeout( openTimeout );
  27              openTimeout = setTimeout( () => {
  28                  // Only show if it's not already open.
  29                  if ( ! panel.matches( ':popover-open' ) ) {
  30                      // pass the triggering element so implicit position anchors work.
  31                      panel.showPopover( { source: trigger } );
  32                  }
  33              }, 300 );
  34          };
  35          // Hide Tooltip Function.
  36          const hideTooltip = () => {
  37              clearTimeout( openTimeout );
  38              if ( panel.matches( ':popover-open' ) ) {
  39                  panel.hidePopover();
  40              }
  41          };
  42  
  43          // Bind Hover and Focus Events.
  44          trigger.addEventListener( 'mouseenter', showTooltip );
  45          trigger.addEventListener( 'focus', showTooltip );
  46  
  47          trigger.addEventListener( 'mouseleave', hideTooltip );
  48          trigger.addEventListener( 'blur', hideTooltip );
  49      });
  50  })();