Gracias a @luciamartinLucía Martín@luciamartinDiseño interfaces que se sienten como objetos. Madrid.1.284 seguidores312 siguiendo por el diseño del nuevo panel.
Nutzerkarte bei Hover
Fahr über eine Erwähnung und eine Profilkarte erscheint mit kurzer Bio, Followerzahlen und Folgen-Button.
Einstellungen
Code
<p class="uv-tuh">Danke an <span class="mt" tabindex="0">@luciamartin<span class="cd"><span class="tp"><span class="av" aria-hidden="true">LM</span><button type="button" aria-pressed="false"><span class="a">Folgen</span><span class="b">Gefolgt</span></button></span><b class="nm">Lucía Martín</b><span class="hd">@luciamartin</span><span class="bi">Ich gestalte Oberflächen, die sich wie Gegenstände anfühlen. Madrid.</span><span class="st"><span><b>1.284</b> Follower</span><span><b>312</b> folgt</span></span></span></span> für das Design des neuen Dashboards.</p>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
Social Apps, Foren und Kollaborationstools zeigen, wer jemand ist, ohne die Seite zu verlassen. Bei Hover oder Fokus auf der Erwähnung wartet die Karte kurz und öffnet sich dann mit Avatar, Name, Handle, kurzer Bio und Followerzahlen. Sie bleibt offen, wenn der Zeiger hineinwandert, der Folgen-Button darin lässt sich also drücken.
Die kleine Verzögerung verhindert Flackern, wenn der Zeiger nur vorbeistreift. Der Folgen-Button ist ein Toggle mit aria-pressed, die zwei Farben bilden Avatarverlauf und Erwähnungsfarbe. So passt die Karte zu jeder Marke.