<section>
<button class="anchor">
<p aria-hidden="true">?</p>
<p class="sr-only">Open tooltip</p>
</button>
<div class="positioned right">This is a tooltip</div> <section>
section {
padding: 50px;
}
button {
appearance: none;
border: 1px solid black;
background: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
}
button p {
margin: 0;
}
.anchor {
anchor-name: --tooltip
}
.positioned {
display: none;
position: absolute;
position-anchor: --tooltip;
background: black;
border-radius: 4px;
color: white;
border: none;
padding: 0.5rem;
margin: 2px;
}
.right {
inset-area: right;
}
.anchor:hover + .positioned {
display: flex;
}
.sr-only {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.