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>
    </>
  );
}