Loading video...

Video Failed to Load

Go Home

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

164,666 views • 1 year ago •via X (Twitter)

10 Comments

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

here's the @CodePen for this one 🚀 updated it so you can explicitly define the flow of how the text slides 🤙

Arsyad's profile picture
Arsyad1 year ago

silky tooltip @silkysignon

ANOOP's profile picture
ANOOP1 year ago

Looks cool For the the Horizontal menu the text moving sideways would have looked super cool

Erik Rasmussen 👨‍💻🇺🇸🇪🇸's profile picture
Erik Rasmussen 👨‍💻🇺🇸🇪🇸1 year ago

I assume this is okay for a11y, because "tooltips as divs" are ignored by screen readers, and the information is portrayed through other means?

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈1 year ago

Yeah, for that reason [aria-hidden] on the tip itself and readable navigation links with a class to visually hide them but not from screen readers 🤙

Dheeraj Purohit धीरज पुरोहित ⭕❗⭕'s profile picture
Dheeraj Purohit धीरज पुरोहित ⭕❗⭕1 year ago

@Sikandar_Bhide

Robin Stoytchev's profile picture
Robin Stoytchev1 year ago

Codepen posted? Really nice 🙌

Private WIFI's profile picture
Private WIFI1 year ago

Wen book release

Brian's profile picture
Brian1 year ago

Instead of Pinball Wizard, you're a CSS Wizard

Ayan Patel's profile picture
Ayan Patel1 year ago

👏

Related Videos