<div class="button-group">
  
  <button style="anchor-name: --anchor-btn-1" popovertarget="my-tooltip-1">
    <p aria-hidden="true">?</p>
    <p class="sr-only">Open Tooltip</p>
  </button>

  <div id="my-tooltip-1" class="tooltip" style="position-anchor: --anchor-btn-1" popover>
    <p>The sun dipped, fiery orange melting into buttery yellow. Maya mirrored the hues on canvas, each stroke bittersweet – fleeting beauty, a day gone. Yet, she painted on, for in those streaks lay the promise of a new dawn.</p>
  </div>

  <button style="anchor-name: --anchor-btn-2" popovertarget="my-tooltip-2">
    <p aria-hidden="true">?</p>
    <p class="sr-only">Open Tooltip</p>
  </button>

  <div id="my-tooltip-2" class="tooltip" style="position-anchor: --anchor-btn-2" popover>
    <p>Shades of green swirled through the ancient forest. A hiker breathed in the scent of earth, worries dissolving in the symphony of green. Moss clung to weathered trunks, ferns unfurled. Here was a sense of belonging, far from the city's strife.</p>
  </div>

  <button style="anchor-name: --anchor-btn-3" popovertarget="my-tooltip-3">
    <p aria-hidden="true">?</p>
    <p class="sr-only">Open Tooltip</p>
  </button>

  <div id="my-tooltip-3" class="tooltip" style="position-anchor: --anchor-btn-3" popover>
    <p>Lavender and fuchsia danced in the twilight. Sarah gazed at the dreamy sky.  This was her grandmother's garden, a connection through time. The colors whispered secrets of love and resilience, a heritage more precious than any gem.</p>
  </div>
  
  <button style="anchor-name: --anchor-btn-4" popovertarget="my-tooltip-4">
    <p aria-hidden="true">?</p>
    <p class="sr-only">Open Tooltip</p>
  </button>

  <div id="my-tooltip-4" class="tooltip" style="position-anchor: --anchor-btn-4" popover>
    <p>Crystal blue deepened into vibrant aqua at the reef. A diver hovered, awestruck. Sunlight and scales danced in the ocean's gradient, a tapestry of wonders, a reminder of the Earth's boundless beauty.</p>
  </div>
  
  <button style="anchor-name: --anchor-btn-5" popovertarget="my-tooltip-5">
    <p aria-hidden="true">?</p>
    <p class="sr-only">Open Tooltip</p>
  </button>

  <div id="my-tooltip-5" class="tooltip" style="position-anchor: --anchor-btn-5" popover>
    <p>Orange embers glowed, the fire crackling. Outside, the sunset blazed in coral and rose.  Lily held her mug close, lost in the shifting colors.  The comforting gradient washed away worries, a simple magic reminding her of light and warmth to come.</p>
  </div>
</div>
:root {
  --btn-size: 2rem;
  --spacer: 0.5rem;
  --bg: black;
}

.tooltip {  
  /*  POSITIONING  */
  inset-area: bottom;
  margin-top: var(--spacer);
  max-width: 300px;
  
  /*  etc  */
  background: var(--bg);
  color: white;
  border: none;
  padding: 0 1rem;
  overflow: visible;
  border-radius: 1rem;
}

.tooltip::before {
  content: '';
  bottom: 100%;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-bottom-color: black;
	border-width: 8px;
	margin-left: -8px;
}

/* etc */
.button-group {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4rem;
}

button {
  font-size: calc(var(--btn-size) - 0.75rem);
  border-radius: var(--btn-size);
  height: var(--btn-size);
  width: var(--btn-size);
  display: grid;
  border: 2px solid var(--bg);
  place-content: center;
  background: linear-gradient(15deg, #ff7e7e, #ffcd73, #ffffb0);
}

button:nth-of-type(2) {
  background: linear-gradient(345deg, #46e9d2, #a9ffa6, #d1ffb0);
}

button:nth-of-type(3) {
  background: linear-gradient(279deg, #ff9fff, #bfa8ff);
}

button:nth-of-type(4) {
  background: linear-gradient(8deg, #adfffb, #6999ff);
}

button:nth-of-type(5) {
  background: linear-gradient(345deg, #f29eff, #ffa6c6, #ff9f9f);
}

body {
  height: 50vh;
  display: grid;
  place-items: center;
  position: relative;
  font-family: system-ui, serif;
  line-height: 1.4;
}

.sr-only {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
// Demo only works in Canary with the #experimental-web-platform-features flag turned on

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.