HTML + CSSTooltips
Side tooltip with stem
Springs out to the right of the icon, attached by a thin line that stretches out like a stem.
Settings
16px
1x
Code
<button class="uv-tl">↗<span>Share link</span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Tooltips
Where to use it
Side tooltips belong in vertical layouts: the collapsed icon sidebar of a CRM, the floating share bar next to a blog post, the tool column of a photo editor. Labels above the icons would cover the neighbor; sideways they stay clear. The stem gives this CSS tooltip a small elastic pull as it opens.
It opens to the right, so keep it for bars on the left edge of the screen, and mirror it for a right-hand panel. The stem uses your first color; a muted tone stops it from looking like an arrow pointing at something else.