Foren
Neue Beiträge
Foren durchsuchen
Was ist neu?
Neue Beiträge
Profilnachrichten
Online
Anmelden
Registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Neue Beiträge
Foren durchsuchen
Menü
Anmelden
Registrieren
App installieren
Installieren
Programmierung
HTML
Tooltip mit CSS wie genau platzieren?
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Auf Thema antworten
Beitrag
[QUOTE="Sempervivum, post: 12451, member: 3917"] Die Zentrierung geht relativ einfach, indem man mit [ICODE]transform:translate[/ICODE] den Tooltipp um die halbe Breite nach links verschiebt: [CODE]span.tool:hover span.tip { display: Inline-Block; display: Table-Caption; position: absolute; width: 120px; z-index: 10000; background-color: rgb(0, 0, 0); box-shadow: 0px 0px 0px rgb(255 255 255); padding: 4px; /* margin: 15px; */ border: solid 1px #c32e04; border-radius: 0.5em; font-family: Arial, Sans-Serif; font-size: 14px; color: #FFFFFF; white-space: pre; transform: translateX(-60px); }[/CODE] Das Margin habe ich deaktiviert, damit der Tooltip direkt unter die Ziffer gelangt. Du kannst ihn wieder aktivieren, musst das dann aber beim translate berücksichtigen. Wie man mit CSS Dreiecke erzeugt, kannst Du z. B. hier nachlesen: [URL]https://css-tricks.com/snippets/css/css-triangle/[/URL] [/QUOTE]
Zitate
Authentifizierung
Antworten
Programmierung
HTML
Tooltip mit CSS wie genau platzieren?
Oben
Unten