Tooltip auf der rechten Seite des Eingangs

Question

Ich habe diesen einfachen CSS-Trick codiert, um anzuzeigen, wenn Sie auf die Eingabe klicken (: Fokus), ein Tooltip wird Ihnen einige Informationen über die Eingabe geben. Alles funktioniert, aber der Tooltip wird unterhalb der Eingabe angezeigt und nicht über. Eigentlich weiß ich, dass ich Marge verwenden kann, um es zu beheben, aber ich frage, ob es eine "mehr" saubere Art gibt, wenn Sie die absolute Position auf diese Weise verwenden, wird der Tooltip automatisch über die Eingabe ausgerichtet.

HTML:

<div> 
    <input type="text" placeholder="Username"> 
    <span class="input_info">Info1</span> 
</div> 
<div> 
    <input type="text" placeholder="Password"> 
    <span class="input_info">Info2</span> 
</div> 

CSS

.input_info { 
    display: none; 
    position: absolute; 
    background: #000; 
    border: 1px solid #fff; 
    color: #fff; 
    width: 100px; 
    margin-left: 80px; 
} 

input[type="text"]:focus + .input_info { 
    display: block; 
} 

https://jsfiddle.net/xzqsaobu/

Answer 1

Hier ist, wie es mit position: absolute und relative zu tun.

• auf den Behälter gesetzt position: relative und display: table (shrink fit).

• Für den Tooltipp position: absolutetop: 0 und left: 100% festlegen (wird an den rechten Rand des entsprechenden Containers verschoben).

Sie können die Felder auf einer Seite mit diesem Ansatz auch horizontal zentrieren.

jsFiddle

.fieldset { 
 
    position: relative; 
 
    display: table; 
 
    /* margin: auto; */ 
 
} 
 
.input_info { 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
    background: #000; 
 
    border: 1px solid #fff; 
 
    color: #fff; 
 
    width: 100px; 
 
    display: none; 
 
} 
 
input[type="text"]:focus + .input_info { 
 
    display: block; 
 
}

<div class="fieldset"> 
 
    <input type="text" placeholder="Username"> 
 
    <span class="input_info">Info1</span> 
 
</div> 
 
<div class="fieldset"> 
 
    <input type="text" placeholder="Password"> 
 
    <span class="input_info">Info2</span> 
 
</div>

Answer 2

Sie müssen display: block-display: inline-block ändern, entfernen Sie die margin-left und position: absolute;.

Your fiddle updated.

Snippet:

.input_info { 
 
    background: #000; 
 
    border: 1px solid #fff; 
 
    color: #fff; 
 
    width: 100px; 
 
    display: none; 
 
} 
 

 
input[type="text"]:focus + .input_info { 
 
    display: inline-block; 
 
}

<div> 
 
<input type="text" placeholder="Username"> 
 
<span class="input_info">Info1</span> 
 
</div> 
 
<div> 
 
<input type="text" placeholder="Password"> 
 
<span class="input_info">Info2</span> 
 
</div>