Alojamientos en la zona
HTML + CSSTooltips
Map price pins with preview
Prices on a map: hovering one darkens it, scales it up and shows the place with its rating.
Settings
16px
1x
Code
<div class="uv-tmp"><p>Stays in the area</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">Harbor Loft</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">Sun Studio</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">Green Penthouse</span><span class="rt">★ 5,0</span></span></button></div></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
Booking and rental sites put prices directly on the map so people compare at a glance. Each white price pin here sits on a stylized street map; hovering or focusing a pin turns it dark, scales it up, brings it to the front and opens a small card above with a thumbnail, the place name and its rating.
Pins are buttons positioned with percentages, so they stay in place at any size. Replace the drawn map with a real one, keep the pin markup, and link each pin to its listing.