HTML aus einem Tooltip mehrere machen?
Moin,
Ich habe ein Tooltip programmiert, aber wie kann ich aus dem einen ein weiteres machen so das bei währen dem hover Vorgang beide aufploppen? Ich hab den Code schon kopiert und 2. Tooltip wird auch angezeigt, aber wie füge ich dem 2. Jetzt Klassen hinzu, damit ich es an die richtige Stelle platzieren kann?
4 Antworten
Verwende für Tooltips keine IDs, da jene einzigartig sein müssen. Ich würde zudem von <div> Elementen absehen, da es sich dabei um Block-Elemente handelt. Für Tooltips eignet sich eher Inline-Elemente wie das <span> Element, da dieses im Gegensatz zu Block-Elementen auch in Fließtext untergebracht werden kann.
HTML:
<!-- example 1 -->
<div class="container">
<span class="tooltip">text...</span>
</div>
<!-- example 2 -->
<p class="text">
Some texte comes heres...
<span class="tooltip">text...</span>
</p>
<!-- example 3 -->
<button class="btn">
<span class="btn__label">click me<span>
<span class="tooltip">text...</span>
</button>
CSS:
.container, .text, .btn {
position: relative;
.tooltip {
top: -2.15em;
}
:hover .tooltip {
opacity: 1;
}
}
.tooltip {
--_bg-color: black;
--_color: white;
padding: 0.3125em 0.5em;
position: absolute
left: 50%
transform: translateX(-50%)
font-size: 0.875em;
border-radius: 5px;
background-color: var(--_bg-color);
color: var(--_color);
::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top: 0.5em solid var(--_bg-color);
border-right: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.5em solid transparent;
}
}
LG medmonk
die beiden bekommen die genau gleiche position. Mach dir eine zweite ID (z.B.: "Tooltip2") und gib dort einen anderen top wert ein, dann sollte es beides anzeigen
Gib beide tooltiptexts in das eine tooltip rein und schau was passiert
Nutze statt (einmaliger) IDs besser Klassen.
<div class="tooltip">
<div class="tooltiptext">…</div>
…
</div>
CSS
.tooltip {
…
}
.tooltiptext {
…
}
Und bitte poste in Zukunft deinen Quellcode und keine schlechten Fotos.
Zwei verschiedene Ids verwenden.
Jede ID muss unique sein.
unique muss es nicht sein, die beiden Parts überlappen sich und deswegen wird ja nur eines angezeigt. Im Developement mode sollten beide tooltips da sein, liegen aber übereinander
Klar müssen IDS unique sein.
Doppelte Ids führen immer zu Fehlern und sind nicht W3C konform.
klar, dass doppelte IDs zu fehlern fühlen, sind auch aus gutem Grund nicht W3C konform (so wie du's gerade erwähnt hast). Es kommt aber kein Fehler, der Compiler kann das kompilieren und es kommt genau das, was ich oben erwähnt habe. Beide teile überlappen sich
Da ist nicht Mal ein "Compiler", weil HTML keine Programmiersprache ist, sondern eine Markuplanguage, die ohne Compiler läuft.
Mit dem Überlappen hast du Recht, andere Position angeben, dann erscheint auch was.
Danke, hat funktioniert allerdings wird erst immer das 1. Angezeigt und das 2. Wird dann nur angezeigt, wenn ich an einem bestimmten Punkt darüber hover. Weißt du eventuell wie die beiden gleich schnell an der gleiche hover Stelle aufgehen?