Alojamientos en la zona
HTML + CSSTooltips
Preis-Pins auf der Karte
Preise auf einer Karte: Beim Hover wird einer dunkel, größer und zeigt die Unterkunft mit Bewertung.
Einstellungen
16px
1x
Code
<div class="uv-tmp"><p>Unterkünfte in der Gegend</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">Hafen-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">Studio Sonne</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">Grünes Penthouse</span><span class="rt">★ 5,0</span></span></button></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Buchungs- und Mietportale setzen Preise direkt auf die Karte, damit man auf einen Blick vergleicht. Jeder weiße Preis-Pin liegt hier auf einem stilisierten Stadtplan. Bei Hover oder Fokus wird er dunkel, größer, rückt nach vorn und öffnet darüber eine kleine Karte mit Vorschaubild, Name und Bewertung.
Die Pins sind Buttons mit Prozentpositionen, sie bleiben also in jeder Größe an ihrem Platz. Ersetze die gezeichnete Karte durch eine echte und verlinke jeden Pin mit seinem Inserat.