<div class="description">
fixedpos tooltip + position-visibility: anchors-visible.
</div>
<div class="scroller">
<div class="item">Item 0</div>
<div class="item">Item 1</div>
<div class="item" id="anchor">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
<div id="anchor-top-anchor"></div>
<div id="tooltip">The best item!</div>
</div>
.description {
font-family: 'Arial', sans-serif;
font-size: small;
}
.scroller {
position: relative;
width: 300px;
height: 150px;
overflow-y: scroll;
border: 2px solid #e0e0e0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background-color: #f8f8f8;
font-family: 'Arial', sans-serif;
font-size: large;
}
.item {
padding: 10px;
margin-top: 1px;
background-color: #fff;
color: #333;
transition: background-color 0.2s ease;
}
.item:hover {
background-color: #ffebc5;
}
#anchor {
anchor-name: --anchor;
background-color: orange;
}
/* Fake anchor at the top of the real anchor */
/* Used for showing the tooltip only when the top of the anchor is visible. */
#anchor-top-anchor {
anchor-name: --anchor-top-anchor;
position-anchor: --anchor;
bottom: anchor(--anchor top);
position: absolute;
left: 0;
}
#tooltip {
pointer-events: none;
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(--anchor-top-anchor top);
padding: 10px;
background-color: #333;
color: #f0f0f0;
text-align: center;
border-radius: 4px;
margin: 0 5px 5px 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
font-size: 14px;
filter: drop-shadow(4px 4px 4px rgba(50,50,50,0.3));
}
#tooltip::after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
@supports not (position-visibility: anchors-visible) {
#tooltip {
display: none;
}
}
body {
padding: 5rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.