El tiempo en Toledo
Clay weather forecast tooltip
Soft clay chips with each day's weather; hover one and a squishy tooltip bounces in with the hourly forecast.
Settings
Code
<div class="uvq08-cly"><div class="ds"><span class="wr pk"><button type="button" class="dy" aria-describedby="uvq08-cly-0"><span class="dn">Today</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">Fri</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">Sat</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">Weather in Toledo</p></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
Three day chips modeled like clay, with inner highlights, soft shadows and small sun, cloud and rain icons built from rounded shapes. Hover or focus a day and a tooltip made of the same clay bounces in with a jelly squash and stretch, showing four hours with icon and temperature, joined to the chip by two little clay drops. It fits weather widgets, travel planners and friendly dashboards.
The main color sets the temperatures and the second the clay itself, from sand to pale pink. Keep four or five hours per day so the tooltip stays compact, and shape your own icons if you need snow or wind.