Click-based
Popovers

Popovers are a popular UI element similar to tooltips but supporting much more content than a tooltip usually does.

Their content is also usually selectable/interactive to the user where tooltip content is usually not.

hidden content is hidden


using native
<details>

The details tag creates a disclosure widget that shows and hides additional information when open or closed, without needing any JavaScript.

Docs
and
<summary>

The summary tag marks content within a disclosure that should always be shown. It is also what the user can click on to open/close the disclosure.

Docs
tags
and
only CSS.

No Javascript.

No unnecessary DOM.