Comic speech balloon tooltip
A halftone comic panel where the character pops a thick outlined speech balloon with an action burst behind it.
Settings
Code
<div class="uvq08-cmc"><div class="pn"><span class="cap">Meanwhile, at the office…</span><span class="wr pk"><button type="button" class="hr" aria-label="Character" aria-describedby="uvq08-cmc-t"><svg viewBox="0 0 80 80" aria-hidden="true"><path class="sh" d="M12 80c2-16 12-24 28-24s26 8 28 24z"/><circle class="fa" cx="40" cy="34" r="17"/><path class="ha" d="M23 32c0-11 8-17 18-17s16 6 17 15c-6-4-13-5-20-3-6 1-10 3-15 5z"/><circle cx="34" cy="36" r="2.2"/><circle cx="46" cy="36" r="2.2"/><path class="mo" d="M35 44q5 4 10 0"/></svg></button><span class="bl" role="tooltip" id="uvq08-cmc-t">Has anyone seen my stapler?</span></span></div></div>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
See all TooltipsWhere to use it
A comic panel with a halftone dot pattern, a yellow caption box and a small character drawn in SVG. Hover or focus the character and a speech balloon with a heavy black outline pops out with a springy overshoot, while a burst of action lines spins in behind. It brings humor to onboarding, empty states, mascots and playful marketing pages.
The main color tints the dots and the shirt, the second fills the panel. Write the line in a short, spoken tone, and swap the SVG for your own mascot to keep the same balloon and burst.