61

我正在使用 CSS.Tooltips 库来尝试获取工具提示以显示在输入标签上。我可以让它在 ap 标签上工作，但不能在输入标签上工作。有任何想法吗？

这是小提琴的链接：http: //jsfiddle.net/cwlanca/BumU5/1/

代码

[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;
}
<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"/>

4

6 回答 6

185

我知道这是关于 CSS.Tooltips 库的问题。但是，对于像我一样通过谷歌搜索“输入框工具提示”来到这里的其他人，这是最简单的方法：

<input title="This is the text of the tooltip" value="44"/>
于 2015-01-29T17:04:25.737 回答
49

这似乎是一个错误，它适用于所有不是文本框的输入类型（复选框，收音机，...）

有一个快速的解决方法可以奏效。

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

提琴手

于 2013-10-20T16:58:10.103 回答
5 
<input type="name" placeholder="First Name" title="First Name" />

title="First Name"解决了我的问题。它与引导程序一起使用。

于 2019-09-20T05:32:49.060 回答
4

如果您使用的是引导程序（我使用的是 4.0 版），请随意尝试以下代码。

<input data-toggle="tooltip" data-placement="top" title="This is the text of the tooltip" value="44"/>

data-placement可以是顶部、右侧、底部或左侧

于 2019-03-14T01:37:32.270 回答
3

除了 HTML 5 数据提示之外，您还可以使用 css 制作完全可自定义的工具提示，以便在整个标记中的任何地方使用。

/* ToolTip 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; 
    opacity: 0;
    transition: opacity 0.5s;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 5%;
    right: 100%;  
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #aeaeae transparent transparent;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
<div class="tooltip">
  <input type="text" />
  <span class="tooltiptext">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </span>
</div>

于 2016-06-23T06:29:37.613 回答
-2

<input type="text" placeholder="specify">

这会在输入框中添加“指定”作为工具提示文本。

于 2019-08-24T03:20:42.753 回答