14Jueves

  • Café con Marta
  • Reunión con diseñoLlevar las muestras de tela y el presupuesto nuevo
  • Comida con el equipo
HTML + CSSTooltips

Nota adhesiva en la agenda

Un pósit con cinta se pega de golpe sobre la agenda, ladeado y con la esquina levantada, al pasar o enfocar.

Ajustes

16px
1x

Código

<div class="uvq08-stk"><div class="pl"><p class="dy"><b>14</b><span>Jueves</span></p><ul><li><time>09:00</time><span class="nm">Café con Marta</span></li><li><time>10:00</time><span class="nm">Reunión con diseño</span><span class="wr pk"><button type="button" class="ic" aria-label="Ver nota" aria-describedby="uvq08-stk-t"></button><span class="po" role="tooltip" id="uvq08-stk-t"><i class="tp" aria-hidden="true"></i>Llevar las muestras de tela y el presupuesto nuevo</span></span></li><li><time>13:30</time><span class="nm">Comida con el equipo</span></li></ul></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Tooltips

Ver todos: Tooltips

Dónde usarlo

Pasa por el icono de nota de una agenda y un pósit amarillo cae sobre la página con un giro rápido y elástico, una tira de cinta translúcida y la esquina levantada. El texto usa una fuente del sistema con aire manuscrito, así que se lee como algo que alguien apuntó a mano. Encaja en calendarios, listas de tareas, historiales de CRM y cuadernos.

Elige el color del papel con el color principal y el acento de la fecha con el secundario. Deja la nota en una o dos líneas y úsala para comentarios personales, no para mensajes del sistema, para que la metáfora siga siendo creíble.