Popover

<script type="module">
  import '@patternfly/elements/pf-button/pf-button.js';
  import '@patternfly/elements/pf-popover/pf-popover.js';
const button = document.querySelector('pf-button');
const popover = document.querySelector('pf-popover');
button.addEventListener('mouseover', function() {
popover.show();
});
button.addEventListener('mouseout', function() {
popover.hide();
});
</script>
<pf-button>Hover to cite</pf-button>
<pf-popover>
<cite slot="body">Richard M. Stallman</cite>
<q>Free software is a political movement; open source is a development model.</q>
</pf-popover>

import { LitElement, html } from 'lit';
import '@patternfly/elements/pf-button/pf-button.js';
import '@patternfly/elements/pf-popover/pf-popover.js';

class Citer extends LitElement {
  render() {
    return html`
<pf-button @mouseover="${this.#onMouseover}"
           @mouseout="${this.#onMouseout}">Hover to Cite</pf-button>

<pf-popover>
  <cite slot="body">Richard M. Stallman</cite>
  <q>Free software is a political movement; open source is a development model.</q>
</pf-popover>
    `;
  }

  get #popover() { return this.shadowRoot.querySelector('pf-popover'); }

  #onMouseover() { this.#popover.show(); }

  #onMouseout() { this.#popover.hide(); }
}

import { Button } from '@patternfly/elements/react/pf-button/pf-button.js';
import { Popover } from '@patternfly/elements/react/pf-popover/pf-popover.js';
import { useRef } from 'react';
export function Citer() {
const popoverRef = useRef(null);
const onMouseover = e => void popoverRef.current.show();
const onMouseout = e => void popoverRef.current.hide();
return (
<>
<Button onmouseover={onMouseover}
onmouseout={onMouseout}>Hover to Cite</Button>
<Popover ref={popoverRef}>
<cite slot="body">Richard M. Stallman</cite>
<q>Free software is a political movement; open source is a development model.</q>
</Popover>
</>
);
}