Example showing the use of `dialog` elements in different contexts

dialog-as-tooltip-and-dialog.js

document.body.innerHTML = `
<style>
  .with-overlay {
    display: inline-block;
    border: 1px solid;
  }

  .with-overlay {
    position: relative;
  }

  dialog:not([data-is-modal]) {
    position: absolute;
    display: grid;
    top: 100%;
    margin: initial;
  }

  dialog:not([open]) {
    display: none;
  }
</style>

<div class="with-overlay">
  <button class="toggle-btn">Open Dialog</button>
  <dialog open>
    <p>Hello</p>
  </dialog>
</div>

<button class="toggle-btn">
  Open Modal Dialog
</button>

<dialog open data-is-modal="true">
  <p>Guantanamera</p>
</dialog>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a quam egestas, rhoncus purus eget, sagittis nulla. Quisque tempus luctus leo. Proin efficitur sapien vitae aliquam euismod. Etiam dui lacus, congue a turpis pellentesque, iaculis bibendum quam. Cras auctor finibus nisi, vel pharetra nibh gravida hendrerit. Etiam fringilla nisl id lacus fermentum, id porta lorem tempor. Vestibulum molestie tempus felis, quis aliquam magna scelerisque sed. Curabitur ullamcorper lacus nec libero aliquet elementum. Duis id augue lacus. Fusce nunc mi, fringilla ac sapien eu, tincidunt egestas arcu. Nulla mollis augue in blandit laoreet.</p>

<p>Quisque orci sem, volutpat vel libero non, convallis tristique diam. Donec vel turpis massa. Integer augue nunc, convallis vel varius non, fermentum at nulla. Aenean finibus ipsum velit, non auctor nisi fringilla nec. Donec sagittis quam dictum consequat pretium. Quisque pellentesque ante odio, id maximus velit sagittis eu. Cras suscipit feugiat nulla sit amet volutpat. Nunc eget enim fringilla, eleifend arcu eget, ultrices odio.</p>
`;


document.querySelectorAll('button.toggle-btn').forEach(btn => {
  btn.addEventListener('click', e => {
    const dialog = btn.nextElementSibling;
    if (dialog.open) dialog.close();
    else if (dialog.dataset.isModal) dialog.showModal();
    else dialog.show();
  });
});