將工具提示添加到輸入框中

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庫的問題。然而，對於任何人來到這裏，從谷歌搜索「工具提示輸入框中輸入」像我一樣，在這裏是最簡單的方式產生：

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

Answer 3

除HTML 5的數據提示您可以使用CSS也用於製作完全可定製的工具提示可用於整個標記中的任何位置。

樣式

/* 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