CSSで画像にツールチップのホバーを追加

Question

ユーザーが要素上にマウスを動かすと表示されるツールチップ（CSSを使用）を作成したいと思います。私はそれをテキストのために働かせましたが、私は画像のためにそれを働かせることに問題があります。

.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; 
} 

あなたは、このリンクで私が何をしたか見ることができます：

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

私はあなたが私を与えることができる任意のヘルプをapreciateます。前もって感謝します！！

Answer 1

.tooltiptext2は.imageの子ではありません。 .image .tooltiptext2の代わりに.image + .tooltiptext2を使用すると、ツールチップが機能します。

https://jsfiddle.net/8Lmz2oLj/

Answer 2

ツールチップは、画像の子ではありません。ホバーを聴いているイメージコンテナになるようにスタイルを修正する必要があります。

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

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