给输入框添加提示信息

Question

我正在使用CSS.Tooltips库来尝试在输入标签上显示提示文本，但我只能在p标签上实现它，对于输入标签没有效果。有什么建议吗？

以下是链接到JSFiddle的代码示例：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"/>

- Lance Collins

Answer 1

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

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

- user227353

---

一些旧版的Chrome似乎存在一个bug。尝试同时使用alt和title属性。请参考https://dev59.com/JWkv5IYBdhLWcg3wvDNF - user227353

请注意，对于狭窄的输入类型（例如单选按钮），这显然只会在悬停在实际单选按钮上时出现，而不是在相关的图例上方，这可能不是您的用户所期望的。 - Marcus Junius Brutus

Answer 2

似乎这是一个bug，仅在输入类型为非文本框（复选框，单选框等）时有效。

有一个快速的解决方法可以使用。

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

JsFiddle

- Justin Lessard

---

如果在输入框中添加HTML 5的"required"属性，似乎会导致此功能出现问题。当你将鼠标悬停在输入框上时，预期的工具提示会被显示，但随后浏览器提供的"请填写此字段"工具提示会部分覆盖它。 - user497087

这不是一个 bug - 工具提示 CSS 依赖于 :before 和 :after 伪选择器，但这些选择器在输入元素上不起作用。它需要成为一个容器，以便可以附加伪元素。 - patmood

我可以看到这在JsFiddle上是有效的，但出于某种原因，在我的情况下它根本不起作用...你有什么注意事项吗？ - GileBrt

<input tip="提示！" type="text"/> 在当前浏览器中可用。不再需要使用 div。 - Jilles van Gurp

我需要一个消失的工具提示。通过一点JavaScript和对JsFiddle的小更新，我能够实现这一点。如果有人感兴趣，我在这里附上了https://jsfiddle.net/e4qo6dmz/。 - Cees

Answer 3

<input type="name" placeholder="First Name" title="First Name" />

title="First Name" 解决了我的问题。它在使用 Bootstrap 时能够正常工作。

- Tayyab Hayat

Answer 4

除了HTML 5 data-tip之外，您还可以使用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>

- Partha Roy

---

这对于输入类型无效。请仔细查看问题。 - Irfan Raza

这只是我给出的样式，你可以根据自己的需求调整CSS部分。 :) - Partha Roy

当在一个大页面上向下滚动时，你再也看不到工具提示了。 - Moritz Schmidt

Answer 5

如果您正在使用Bootstrap（我使用的是4.0版本），请随意尝试以下代码。

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

data-placement可以是top、right、bottom或left

- Kushan Randima

---

为了使其正常工作，您必须在文档准备就绪后通过 $('[data-toggle="tooltip"]').tooltip() 启用工具提示。 - user2682863