<div class="wrapper">
  Click-based 
  <details data-popover="up">
    <summary>Popovers</summary>
    <div>
      <p>Popovers are a popular UI element similar to tooltips but supporting much more content than a tooltip usually does.</p>
      <p>Their content is also usually selectable/interactive to the user where tooltip content is usually not.</p>
    </div>
    <p>hidden content is hidden</p>
  </details>
  <br />
  using native
  <details data-popover="right">
    <summary>&lt;details&gt;</summary>
    <div>
      <p>The details tag creates a disclosure widget that shows and hides additional information when open or closed, without needing any JavaScript.</p>
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" target="_blank">Docs</a>
    </div>
  </details>
  and
  <details data-popover="left">
    <summary>&lt;summary&gt;</summary>
    <div>
      <p>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.</p>
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary" target="_blank">Docs</a>
    </div>
  </details>
  tags
  <br />
  and
  <details data-popover="down">
    <summary>only CSS.</summary>
    <div>
      <p>No Javascript.</p>
      <p>No unnecessary DOM.</p>
    </div>
  </details>
</div>
/* popover */
details[data-popover] {
  display: inline;
  position: relative;
}
details[data-popover] > summary:focus {
  outline: none;
}
details[data-popover] > summary::-webkit-details-marker {
  display: none;
}
details[data-popover] > summary {
  list-style: none;
  text-decoration: underline dotted teal;
}
details[data-popover] > summary + * {
  position: absolute;
  display: block;
  z-index: 1;
  width: 350%;
  border: solid 1px teal;
  border-radius: 5%;
  padding: 10px;
  background: white;
}
details[data-popover] > * + * {
  /* hide detail elements that would ruin the popover */
  display: none;
}
details[data-popover="up"] > summary + * {
  bottom: calc(0.5rem + 100%);
  right: 50%;
  transform: translateX(50%);
}
details[data-popover="down"] > summary + * {
  top: calc(0.5rem + 100%);
  right: 50%;
  transform: translateX(50%);
}
details[data-popover="left"] > summary + * {
  right: calc(1rem + 100%);
  bottom: 50%;
  transform: translateY(50%);
}
details[data-popover="right"] > summary + * {
  left: calc(1rem + 100%);
  bottom: 50%;
  transform: translateY(50%);
}

/* wrapper setup */
.wrapper {
  width: 100%;
  padding: 250px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.