HTML aus einem Tooltip mehrere machen?

4 Antworten

medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Webentwicklung
17.02.2024, 03:18

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
Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer
crafter32
13.02.2024, 10:38

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
Jonesone123 
Fragesteller
 13.02.2024, 11:40

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?

0
crafter32  13.02.2024, 14:08
@Jonesone123

Gib beide tooltiptexts in das eine tooltip rein und schau was passiert

0
Babelfish
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, JavaScript, PHP
13.02.2024, 12:34

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.
Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.
Chris102004
13.02.2024, 10:36

Zwei verschiedene Ids verwenden.

Jede ID muss unique sein.
crafter32  13.02.2024, 10:41

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

0
Chris102004  13.02.2024, 10:42
@crafter32

Klar müssen IDS unique sein.

Doppelte Ids führen immer zu Fehlern und sind nicht W3C konform.

0
crafter32  13.02.2024, 10:45
@Chris102004

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

0
Chris102004  13.02.2024, 10:47
@crafter32

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.

1