14Jueves
- Café con Marta
- Reunión con diseñoLlevar las muestras de tela y el presupuesto nuevo
- Comida con el equipo
Sticky note tooltip
A taped sticky note slaps onto the planner, tilted with a lifted corner, when you hover or focus the note icon.
Settings
Code
<div class="uvq08-stk"><div class="pl"><p class="dy"><b>14</b><span>Thursday</span></p><ul><li><time>09:00</time><span class="nm">Coffee with Marta</span></li><li><time>10:00</time><span class="nm">Design meeting</span><span class="wr pk"><button type="button" class="ic" aria-label="View note" aria-describedby="uvq08-stk-t"></button><span class="po" role="tooltip" id="uvq08-stk-t"><i class="tp" aria-hidden="true"></i>Bring the fabric samples and the new quote</span></span></li><li><time>13:30</time><span class="nm">Lunch with the team</span></li></ul></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
Hover the small note icon in a day planner and a yellow sticky note lands on the page with a quick springy rotation, a strip of translucent tape and a curled corner. The text uses a handwritten looking system font, so it reads like something a person jotted down. It suits calendars, task lists, CRM timelines and notebooks.
Pick the paper color with the main color and the accent of the date with the second. Keep the note to one or two lines, and use it for personal comments rather than system messages so the metaphor stays honest.