Ist es möglich, eine Spanne als Tooltip mit css

Question

style Ich habe einige HTML, die zurückgegeben wird, wenn ich ein Formular abschicken, das ich nicht ändern kann.

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

Ich möchte es um Stil, so dass die div.error ein Symbol zeigt, das, wenn ich den Mauszeiger über zeigt den Text als Tooltip.

Kann dies mit css allein gemacht werden?

Answer 1

Sie einen schweben auf einem div verwenden können, um das Kind Spanne anzuzeigen:

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

:

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

Sie auch eine Pseudo-Elemente anstelle der Spanne verwenden können