Create hover popups from HTML elements.

<script src="/path/to/popover.js" type="text/javascript"></script>

Add an element that will act as the popover target. The popover is positioned relative to this.

<div id="target-1">Hover me</div>

Add your popover contents to the document.

By default, the original popover contents do not have their visibility modified even when the popover is not visible. It is advised to use css to hide any content that is not to be seen until it has been rendered in a popover. This is shown in the example below.

<div id="contents" style="display: none;">
  <div id="content-1">
    This content will be shown in a popover
  </div>
</div>

Create a new instance of Popover with the target and contents elements as arguments.

const target = document.querySelector('#target-1');
const contents = document.querySelector('#content-1');

const popover = new Popover(target, contents);