<button popovertarget="my-tooltip">
<p>?</p>
</button>
<div id="my-tooltip" class="tooltip" popover>
<p>I am a tooltip with more information. I am a tooltip with more information. I am a tooltip with more information. I am a tooltip with more information.<p>
</div>
button {
anchor-name: --question-mark;
}
#my-tooltip {
position-anchor: --question-mark;
inset-area: top;
position-try-fallbacks: flip-block;
}
/* etc. */
button {
background: #ddd;
font-size: 1rem;
font-weight: 800;
font-family: monospace;
border-radius: 100%;
aspect-ratio: 1/1;
width: 1.5rem;
line-height: 0;
border: 2px solid black;
margin-top: 40dvh;
}
.tooltip {
font-family: system-ui, sans-serif;
background: #333;
color: white;
font-weight: 400;
padding: 1rem;
max-width: 200px;
line-height: 1.5;
}
body {
display: grid;
grid-template-rows: 1fr;
justify-content: center;
height: 100vh;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.