入力ボックスにツールチップを追加する

Question

CSS.Tooltipsライブラリを使用して、入力タグにツールチップを表示しようとしています。私はそれがpタグではなく、入力タグで動作するようにすることができます。何か案は？ここで

はバイオリンへのリンクです：バグのようですhttp://jsfiddle.net/cwlanca/BumU5/1/

HTML

<p data-tip="This is the text of the tooltip">This is a paragraph of text that has a tooltip.</p> 
</br> 
</br> 
</br> 
<input data-tip="This is the text of the tooltip" value="44"/> 

のCss

[data-tip] { 
    position:relative; 

} 
[data-tip]:before { 
    content:''; 
    /* hides the tooltip when not hovered */ 
    display:none; 
    content:''; 
    display:none; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid #1a1a1a; 
    position:absolute; 
    top:30px; 
    left:35px; 
    z-index:8; 
    font-size:0; 
    line-height:0; 
    width:0; 
    height:0; 
    position:absolute; 
    top:30px; 
    left:35px; 
    z-index:8; 
    font-size:0; 
    line-height:0; 
    width:0; 
    height:0; 
} 
[data-tip]:after { 
    display:none; 
    content:attr(data-tip); 
    position:absolute; 
    top:35px; 
    left:0px; 
    padding:5px 8px; 
    background:#1a1a1a; 
    color:#fff; 
    z-index:9; 
    font-size: 0.75em; 
    height:18px; 
    line-height:18px; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    white-space:nowrap; 
    word-wrap:normal; 
} 
[data-tip]:hover:before, 
[data-tip]:hover:after { 
    display:block; 
} 

Answer 1

、それがテキストボックスではありませんすべての入力タイプのために働きます（チェックボックス、ラジオ、...）

すばやく回避策があります。

<div data-tip="This is the text of the tooltip2"> 
    <input type="text" name="test" value="44"/> 
</div> 

JsFiddle

Answer 2

私は、これはCSS.Tooltipsライブラリについて質問です知っています。しかし、誰のために他のGoogle検索「入力ボックスのツールチップ」私がやったように、ここでは最も簡単な方法があるから生じるここに来た：

別にあなたが完全に作るためのCSSを使用することもでき、HTML 5のデータ先端から

<input title="This is the text of the tooltip" value="44"/> 

Answer 3

カスタマイズ可能なツールチップをマークアップ全体のどこにでも使用できます。

スタイル

/* ToolTip CSS classses */ 
.tooltip { 
display: inline-block;  
} 
.tooltip .tooltiptext { 
    margin-left:9px; 
    width : 320px; 
    visibility: hidden; 
    background-color: #FFF; 
    border-radius:4px; 
    border: 1px solid #aeaeae; 
    position: absolute; 
    z-index: 1; 
    padding: 5px; 
    margin-top : -15px; /* according to application */ 
    opacity: 0; 
    transition: opacity 1s; 
} 
.tooltip .tooltiptext::after { 
    content: " "; 
    position: absolute; 
    top: 5%; 
    right: 100%; /* To the left of the tooltip */ 
    margin-top: -5px; 
    border-width: 5px; 
    border-style: solid; 
    border-color: transparent #aeaeae transparent transparent; 
} 


.tooltip:hover .tooltiptext { 
    visibility: visible; 
    opacity: 1; 
} 

HTML

<div class="tooltip">Hover Me 
     <span class="tooltiptext"> 
     Lorem ipsum dolor sit amet, 
     consectetur adipiscing elit, 
     sed do eiusmod tempor incididunt 
     ut labore et dolore magna aliqua. </span> 
    </div> 

Codepan