[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 = document.querySelectorAll( '.wp-is-tooltip' );
  12      let openTimeout;
  13  
  14      popovers.forEach( function( popover ) {
  15          let trigger = popover.querySelector( 'button.wp-tooltip__toggle' );
  16          let panel   = popover.querySelector( 'span.wp-tooltip__bubble' );
  17  
  18          // Show Tooltip Function (with delay to prevent flickering).
  19          const showTooltip = () => {
  20              clearTimeout( openTimeout );
  21              openTimeout = setTimeout( () => {
  22                  // Only show if it's not already open.
  23                  if ( ! panel.matches( ':popover-open' ) ) {
  24                      // pass the triggering element so implicit position anchors work.
  25                      panel.showPopover( { source: trigger } );
  26                  }
  27              }, 300 );
  28          };
  29          // Hide Tooltip Function.
  30          const hideTooltip = () => {
  31              clearTimeout( openTimeout );
  32              if ( panel.matches( ':popover-open' ) ) {
  33                  panel.hidePopover();
  34              }
  35          };
  36  
  37          // Bind Hover and Focus Events.
  38          trigger.addEventListener( 'mouseenter', showTooltip );
  39          trigger.addEventListener( 'focus', showTooltip );
  40  
  41          trigger.addEventListener( 'mouseleave', hideTooltip );
  42          trigger.addEventListener( 'blur', hideTooltip );
  43      });
  44  })();