TogglePopover() не открывается, но не закрывает встроенное всплывающее окно HTML

Демо

Без специального обработчика событий

Вы можете легко это сделать, используя атрибут popovertarget.

<div>
  <button popovertarget = "popover-1">+</button>
  <aside id = "popover-1" popover>
    <p>My Test</p>
  </aside>
</div>

С обработчиком пользовательских событий

Использование состояния всплывающего окна вручную

Если вы хотите использовать для этого специальное событие, используйте popover="manual"

 <aside id = "popover-1" popover = "manual">
    <p>My Test</p>
  </aside>

вы также можете сделать что-то вроде этого:

а) дать вашей кнопке идентификатор

 <button id = "popOverId" onclick = "handlePopover(event, 'popover-1')">+</button>

б) переключить popOver при нажатии кнопки

    let toggle = true;
    
    function handlePopover(event, id) {
        // Identify the first popover element with the given id
        const popover = document.getElementById(id)
    
        // Exit early if no matching popover was found
        if (!popover) return
    
        // Get the coordinates of the clicked button
        let rect = event.target.getBoundingClientRect()
    
        // Modify the coordinates of the popover
        popover.style.left = rect.left + 10 + "px"
        popover.style.top = rect.top + 10 + "px"
    
        // Toggle the display state
        popover.togglePopover(toggle);
    
    }
    
    
    document.addEventListener("click", (evt) => {
    
        if (evt.target.id !== "popOverId") {
            toggle = true;
        } else {
            toggle = !toggle;
        }
    
    });

Решение underscore более лаконичное и чистое, поэтому, если оно соответствует вашим потребностям, выбирайте именно его.