入力タグのプレースホルダにツールチップを追加するにはどうすればよいですか？

Question

私はこのようなものを作成したいと思います：

プレースホルダは、「イベントの利用規約」に加え疑問符のアイコンである必要があります。ユーザーが疑問符の上にカーソルを置くと、ツールチップが表示されます。

プレースホルダにツールチップの疑問符アイコンを含めることはできません。私は、別のdivにテキストとアイコンを追加することを考えています。そして、入力領域内に表示することができます。

これは正しいアプローチですか？よりよい解決策があれば教えてください。

ありがとうございます！

Answer 1

私はあなたが単に除いて、あなたのような何かを達成するために:beforeまたは:afterを使用することができますので、

div { 
 
    position: relative; 
 
} 
 
.placeholder { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 10; 
 
    color: #ccc; 
 
} 
 
.placeholder b { 
 
    display: inline-block; 
 
    width: 18px; 
 
    height: 18px; 
 
    text-align: center; 
 
    line-height: 18px; 
 
    background-color: #ccc; 
 
    color: #fff; 
 
    margin-top: 2px; 
 
    margin-left: 5px; 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
} 
 
input:focus + span, 
 
input:valid + span { 
 
    display: none; 
 
}

<form> 
 
    <div> 
 
    <input type="text" required> 
 
    <span class="placeholder">Text<b title="Lorem ipsum">?</b></span> 
 
    </div> 
 
</form>

Answer 2

行っているでしょう。 divではなく、に入力をラップすることをお勧めします。

label.myLabel { 
 
    position: relative; 
 
} 
 
.myLabel > input[type=text] { 
 
    width: 200px; 
 
    height: 30px; 
 
} 
 
.tag { 
 
    background: black; 
 
    text-align: center; 
 
    color: white; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 5px; 
 
} 
 
.tag:before { 
 
    content: "text will show up"; 
 
    display: none; 
 
    width: 120px; 
 
    background: black; 
 
    color: white; 
 
    position: absolute; 
 
    bottom: -20px; 
 
} 
 
.tag:hover:before { 
 
    display: block; 
 
}

<label class="myLabel"> 
 
    <input type="text"/> 
 
    <div class="tag">?</div> 
 
</label>

またはあなたの入力またはラベルの属性と&がtag要素の框として設定読み取るために、ポップアップテキストを設定することができます。