Alojamientos en la zona
HTML + CSSTooltips
Chinchetas de mapa con precio
Precios sobre un mapa: al pasar por uno se oscurece, crece y enseña el alojamiento con su nota.
Ajustes
16px
1x
Código
<div class="uv-tmp"><p>Alojamientos en la zona</p><div class="mp"><button type="button" style="left:22%;top:34%"><b>85 €</b><span class="cd"><i aria-hidden="true"></i><span class="nm">Casa Lúa</span><span class="rt">★ 4,9</span></span></button><button type="button" style="left:58%;top:22%"><b>120 €</b><span class="cd"><i aria-hidden="true"></i><span class="nm">Loft del Puerto</span><span class="rt">★ 4,8</span></span></button><button type="button" style="left:72%;top:62%"><b>64 €</b><span class="cd"><i aria-hidden="true"></i><span class="nm">Estudio Sol</span><span class="rt">★ 4,7</span></span></button><button type="button" style="left:36%;top:70%"><b>98 €</b><span class="cd"><i aria-hidden="true"></i><span class="nm">Ático Verde</span><span class="rt">★ 5,0</span></span></button></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
Las webs de reservas y alquileres ponen los precios sobre el mapa para comparar de un vistazo. Cada chincheta blanca con precio está sobre un mapa de calles estilizado; al pasar o enfocarla se oscurece, crece, pasa delante del resto y abre encima una pequeña ficha con miniatura, nombre del alojamiento y nota.
Las chinchetas son botones colocados con porcentajes, así que se mantienen en su sitio a cualquier tamaño. Cambia el mapa dibujado por uno real y enlaza cada chincheta con su anuncio.