All the animations are handled in the CSS, too --- the only JavaScript I needed was to add `mouseent

/**
 * Initializes popover listeners at the top of the DOM.
 * Run once during the "init" hook.
 * @param html$ - The jQuery object representing the HTML container.
 */
const InitializePopovers = (html$: JQuery): void => {

  // Attach event listeners using event delegation
  html$.on("mouseenter", "[popovertarget]", showPopover);
  html$.on("mouseleave", "[popovertarget]", hidePopover);

};

/**
 * Handles the mouseenter event for popover triggers.
 * @param event - The mouseenter event.
 */
function showPopover(event: JQuery.MouseEnterEvent) {
  const popoverTrigger$ = $(event.currentTarget as HTMLElement);
  const popover = popoverTrigger$.nextAll("[popover]").first()[0] as Maybe<HTMLElement>;
  popover?.showPopover();
}

/**
 * Handles the mouseleave event for popover triggers.
 * @param event - The mouseenter event.
 */
function hidePopover(event: JQuery.MouseLeaveEvent) {
  const popoverTrigger$ = $(event.currentTarget as HTMLElement);
  const popover = popoverTrigger$.nextAll("[popover]").first()[0] as Maybe<HTMLElement>;
  popover?.hidePopover();
}

export default InitializePopovers; 

/**
 * Initializes popover listeners at the top of the DOM.
 * Run once during the "init" hook.
 * @param html$ - The jQuery object representing the HTML container.
 */
const InitializePopovers = (html$: JQuery): void => {

  // Attach event listeners using event delegation
  html$.on("mouseenter", "[popovertarget]", showPopover);
  html$.on("mouseleave", "[popovertarget]", hidePopover);

};

/**
 * Handles the mouseenter event for popover triggers.
 * @param event - The mouseenter event.
 */
function showPopover(event: JQuery.MouseEnterEvent) {
  const popoverTrigger$ = $(event.currentTarget as HTMLElement);
  const popover = popoverTrigger$.nextAll("[popover]").first()[0] as Maybe<HTMLElement>;
  popover?.showPopover();
}

/**
 * Handles the mouseleave event for popover triggers.
 * @param event - The mouseenter event.
 */
function hidePopover(event: JQuery.MouseLeaveEvent) {
  const popoverTrigger$ = $(event.currentTarget as HTMLElement);
  const popover = popoverTrigger$.nextAll("[popover]").first()[0] as Maybe<HTMLElement>;
  popover?.hidePopover();
}

export default InitializePopovers;