Hinzufügen von Tooltip Hover zu einem Bild mit CSS

Question

Ich möchte eine QuickInfo erstellen (mit CSS), die angezeigt wird, sobald der Benutzer die Maus über ein Element bewegt. Ich habe es für Text arbeiten lassen, aber ich habe Probleme, es für ein Bild arbeiten zu lassen.

.container { 
    position: relative; 
    width: 15%; 
} 

.image { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: auto; 
} 
.image .tooltiptext2 { 
    visibility: hidden; 
    width: 150%; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0; 
    position: absolute; 
    z-index: 1; 
    top: -8px; 
    left: 110%; 
    font-size: 150%; 
    font-family: Arial; 

/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ 
    opacity: 0; 
    transition: opacity 1s; 
} 

.image .tooltiptext2::after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    right: 100%; 
    margin-top: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: transparent black transparent transparent; 
} 
.image:hover .tooltiptext2 { 
    visibility: visible; 
    opacity: 1; 
} 

können Sie sehen, was ich in diesem Link tat

https://jsfiddle.net/Ruloco/q3e4psh3/

ich Hilfe apreciate werden Sie mir geben konnte. Danke im Voraus!!

Answer 1

.tooltiptext2 ist kein Kind von .image. Mit .image + .tooltiptext2 anstelle von .image .tooltiptext2 funktioniert der Tooltip.

https://jsfiddle.net/8Lmz2oLj/

Answer 2

Der Tooltip ist kein Kind des Bildes. Sie müssen Ihre Stile so anpassen, dass der Bildcontainer das Objekt ist, auf das Sie einen Mauszeiger warten.

.container:hover .tooltiptext2 { 
    visibility: visible; 
    opacity: 1; 
} 

https://jsfiddle.net/q3e4psh3/1/