Testigos del salpicadero
Iconos de avería de un coche que se encienden con brillo ámbar o rojo y explican el aviso en una pantalla con líneas.
Ajustes
Código
<div class="uvq08-car" role="group" aria-label="Avisos del coche"><div class="wl"><span class="wr" style="--w:var(--c1)"><button type="button" aria-label="Presión de neumáticos" aria-describedby="uvq08-car-0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 19C4.9 17.4 4 15.3 4 13s.9-4.4 2.5-6M17.5 19c1.6-1.6 2.5-3.7 2.5-6s-.9-4.4-2.5-6M6.5 19h11M12 8.5V13"/><circle cx="12" cy="16" r=".6"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-0"><span class="cd">TPMS</span><span class="ms">Presión baja en la rueda trasera izquierda</span></span></span><span class="wr" style="--w:var(--c2)"><button type="button" aria-label="Aceite del motor" aria-describedby="uvq08-car-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10h5l2-2h3l6-1.5-4 6.5H6a2 2 0 0 1-2-2zM11 8V6.5M9.5 6.5h3"/><path d="M20 14c.6.9.9 1.5.9 1.9a.9.9 0 0 1-1.8 0c0-.4.3-1 .9-1.9z"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-1"><span class="cd">OIL</span><span class="ms">Nivel de aceite bajo</span></span></span><span class="wr pk" style="--w:var(--c1)"><button type="button" aria-label="Combustible" aria-describedby="uvq08-car-2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="4" width="9" height="16" rx="1.5"/><path d="M5 10h9M14 8l3 2v7a1.5 1.5 0 0 0 3 0V9l-2.5-2.5"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-2"><span class="cd">FUEL</span><span class="ms">Reserva: quedan 48 km</span></span></span><span class="wr" style="--w:var(--c2)"><button type="button" aria-label="Cinturón" aria-describedby="uvq08-car-3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="4.8" r="2"/><path d="M8 21v-6l-2-4 3-3.5h4l2 4.5h3M8.5 8.5L15.5 18"/></svg></button><span class="tt" role="tooltip" id="uvq08-car-3"><span class="cd">BELT</span><span class="ms">Abróchate el cinturón</span></span></span></div><div class="od" aria-hidden="true"><span>ODO</span><b>048213</b><span>km</span></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.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Un cuadro de instrumentos oscuro con cuatro testigos para presión de neumáticos, aceite, combustible y cinturón. Pasa o enfoca uno y se enciende con un parpadeo y un brillo de color, mientras una pantalla monoespaciada se abre desde una línea fina, como el display del coche al despertar, con una etiqueta de código y el mensaje. Encaja en apps de coche, gestión de flotas, paneles IoT y estados de dispositivos.
El color principal se usa para avisos y el secundario para alertas críticas. Asigna a cada icono su nivel con una variable CSS y escribe mensajes cortos y en mayúsculas para que se lean como los de verdad.