CSSを使用してスパンをツールチップとしてスタイル指定することは可能です

Question

変更できないフォームを送信すると返されるhtmlがあります。

<div> 
    <label>Enter your email</div> 
    <input type="text" name="email" value="bademail@" /> 
    <div class="error">That email is not valid</div> 
<div> 

私はdiv.errorは私が上にマウスを移動するときにツールチップとしてテキストを表示アイコンが表示されるように、それのスタイルをしたいと思います。

これをcssだけで行うことはできますか？

あなたは子供のスパンを表示するには、divの上でホバーを使用することができます

Answer 1

：

.error { 
 
    position: relative; 
 
} 
 

 
.error > span { 
 
    display: none; 
 
} 
 

 
.error:hover > span { 
 
    display: block; 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 100%; 
 
    border: 1px solid red; 
 
    border-radius: 3px; 
 
    padding: 5px; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    color: white; 
 
}

<div> 
 
    <label>Enter your email</label> 
 
    <input type="text" name="email" value="bademail@" /> 
 
    <div class="error">icon<span>That email is not valid</span></div> 
 
</div>

あなたはまた、代わりにスパンの擬似要素を使用することができます。

.error { 
 
    position: relative; 
 
} 
 
.error:hover::before { 
 
    display: block; 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 100%; 
 
    border: 1px solid red; 
 
    border-radius: 3px; 
 
    padding: 5px; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    color: white; 
 
    content: attr(data-tooltip); 
 
}

<div> 
 
    <label>Enter your email</label> 
 
    <input type="text" name="email" value="bademail@" /> 
 
    <div class="error" data-tooltip="That email is not valid">icon</div> 
 
</div>