hint.css不使用输入标记

时间:2014-06-09 07:54:50

标签: html css tooltip

我在我的注册表单中尝试使用hint.css但是它无效工具提示可以正常使用其他标记,但不能使用<input>标记 这是我的html部分:

<link href="http://cdn.jsdelivr.net/hint.css/1.3.2/hint.css" rel="stylesheet">
<p>
<a class="hint--bottom" data-hint="This is a tooltip">Hello</a>
</p>
<input name="name" value="" class="hint--bottom" data-hint="This is a tooltip"/>

demo here

或者请建议任何支持输入标记的替代工具提示。

PS:请不要在演示中使用jsfiddle,因为在慢速连接上打开需要很长时间。

2 个答案:

答案 0 :(得分:1)

不确定为什么它不会工作,但尝试将其包装在span标签中。

<span class="hint--bottom" data-hint="This is a tooltip!"><input name="name" value=""/></span>

答案 1 :(得分:0)

我认为应该使用div或span来实现输入标记。因为hint.css使用伪元素  喜欢:after和:之前在他们的样式表中Replaced Elements不支持(输入标签)。这已在Github

中报告为问题

有关Can I use the :after pseudo-element on an input field?

中输入标记上的伪元素的更多信息