html5 – 向输入框添加工具提示

前端之家收集整理的这篇文章主要介绍了html5 – 向输入框添加工具提示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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;
}

解决方法

这似乎是一个错误,它适用于所有不是文本框的输入类型(复选框,收音机,…)

有一个快速解决方法将工作.

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

JsFiddle

原文链接:https://www.f2er.com/html5/168176.html

猜你在找的HTML5相关文章