El tiempo en Toledo
Previsión del tiempo en arcilla
Fichas de arcilla con el tiempo de cada día; al pasar, un tooltip blando rebota como gelatina con la previsión por horas.
Ajustes
Código
<div class="uvq08-cly"><div class="ds"><span class="wr pk"><button type="button" class="dy" aria-describedby="uvq08-cly-0"><span class="dn">Hoy</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>18°</b></button><span class="tt" role="tooltip" id="uvq08-cly-0"><span class="hr"><span class="hh">9:00</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>12°</b></span><span class="hr"><span class="hh">12:00</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>17°</b></span><span class="hr"><span class="hh">15:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>19°</b></span><span class="hr"><span class="hh">18:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>16°</b></span></span></span><span class="wr"><button type="button" class="dy" aria-describedby="uvq08-cly-1"><span class="dn">Vie</span><i class="ic rn" aria-hidden="true"><i class="c"></i><i class="d"></i></i><b>15°</b></button><span class="tt" role="tooltip" id="uvq08-cly-1"><span class="hr"><span class="hh">9:00</span><i class="ic rn" aria-hidden="true"><i class="c"></i><i class="d"></i></i><b>11°</b></span><span class="hr"><span class="hh">12:00</span><i class="ic rn" aria-hidden="true"><i class="c"></i><i class="d"></i></i><b>13°</b></span><span class="hr"><span class="hh">15:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>15°</b></span><span class="hr"><span class="hh">18:00</span><i class="ic rn" aria-hidden="true"><i class="c"></i><i class="d"></i></i><b>12°</b></span></span></span><span class="wr"><button type="button" class="dy" aria-describedby="uvq08-cly-2"><span class="dn">Sáb</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>21°</b></button><span class="tt" role="tooltip" id="uvq08-cly-2"><span class="hr"><span class="hh">9:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>14°</b></span><span class="hr"><span class="hh">12:00</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>19°</b></span><span class="hr"><span class="hh">15:00</span><i class="ic sun" aria-hidden="true"><i class="s"></i></i><b>21°</b></span><span class="hr"><span class="hh">18:00</span><i class="ic pc" aria-hidden="true"><i class="s"></i><i class="c"></i></i><b>18°</b></span></span></span></div><p class="hd">El tiempo en Toledo</p></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
Tres fichas de día modeladas como arcilla, con brillos interiores, sombras suaves e iconos de sol, nube y lluvia hechos con formas redondeadas. Pasa o enfoca un día y un tooltip del mismo material entra rebotando como gelatina, con cuatro horas de icono y temperatura, unido a la ficha por dos gotitas de arcilla. Encaja en widgets del tiempo, planificadores de viaje y paneles amables.
El color principal define las temperaturas y el secundario la propia arcilla, de arena a rosa pálido. Deja cuatro o cinco horas por día para que el tooltip siga compacto y crea tus propias formas si necesitas nieve o viento.