入力の右側のツールチップ

Question

入力（：focus）をクリックすると、この簡単なCSSトリックをコーディングして、ツールチップが入力に関する情報を表示します。すべてが機能していますが、ツールチップは入力の下に表示され、終わりではありません。実際に私はそれを修正するためにマージンを使うことができると知っていますが、この方法でポジションアブソリュートを使用すると、自動的にツールチップを入力に合わせるという、よりクリーンな方法があるかどうかを尋ねています。

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

ここ

position: absoluteとrelativeでそれを行う方法です。容器上

• 、position: relativeを設定し、display: table（収まるように縮小）。

• position: absoluteツールチップの場合、top: 0とleft: 100%（相対コンテナの右端に移動）を設定します。

このアプローチでは、ページのフィールドを水平方向に中央に配置することもできます。

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

あなたはmargin-leftとposition: absolute;を削除し、display: inline-blockにdisplay: blockを変更する必要があります。

Your fiddle updated。

スニペット：

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