HTML aus einem Tooltip mehrere machen?

Jonesone123ByJonesone123

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?

(1 votes)
Loading...

Similar Posts

Subscribe
Notify of
10 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
medmonk
medmonk
1 year ago

Do not use IDs for tooltips because they must be unique. I would also <) As these are block elements. For tooltips, inline elements like the <= 1 % Element, since this can also be accommodated in flow text in contrast to block elements.

HTML:




 text...






 Some texte comes heres...
 text...

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

0
crafter32
crafter32
1 year ago

the two get the exact same position. Make a second ID (e.g.: “Tooltip2”) and enter another top value there, then it should show both

-1
Jonesone123
Author
Jonesone123
1 year ago
Reply to  crafter32

Thanks, but it only works the first show and the second. It will only be displayed if I hover at a certain point. Do you know how the two might get up at the same hover place?

0
crafter32
crafter32
1 year ago
Reply to  Jonesone123

Enter both tooltiptexts into a tooltip and see what happens

0
Babelfish
Babelfish
1 year ago

Use (single) IDs better classes.


  
…

  …

CSS

.tooltip {
  …
}

.tooltiptext {
  …
}

And please post your source code and not bad photos in the future.

1
Chris102004
Chris102004
1 year ago

Use two different ids.

Each ID must be unique.

0
crafter32
crafter32
1 year ago
Reply to  Chris102004

unique it does not have to be, the two parts overlap and therefore only one is displayed. In the Developement mode both tooltips should be there, but lie one above the other

0
Chris102004
Chris102004
1 year ago
Reply to  crafter32

IDS must be unique.

Double Ids always lead to errors and are not W3C compliant.

0
Chris102004
Chris102004
1 year ago

There is not even a compiler because HTML is not a programming language, but a markuplanguage that runs without compiler.

With the overlap you are right to specify other position, then something will appear.

1
crafter32
crafter32
1 year ago

Clear that double IDs feel to be mistaken, for good reason not W3C compliant (as you just mentioned). But there is no mistake, the compiler can compile it and it comes exactly what I mentioned above. Both parts overlap

0