如何在网站上添加帮助文本？ [关闭]答案

【问题标题】：how to add help text on websites? [closed]如何在网站上添加帮助文本？ [关闭]
【发布时间】：2015-02-16 13:19:34
【问题描述】：

我已经制作了一个带有基本表格和表格的网站，我正在使用表格中以有组织的方式显示数据的表格进入。

我需要将帮助链接添加到表单的文本框中。例如，我有一个带有“目标地址”标签的文本框，我想在该标签前面添加一个小问号 just like this ，这样当用户点击它时，它会显示文本“输入 IP 地址以触发目标设备”。我想在每个文本框标签前添加帮助链接，以便用户可以看到详细信息他应该输入什么以及以什么格式。

【问题讨论】：

What have you tried?

标签： javascript html forms textbox

【解决方案1】：

我建议 title 属性：

<div title="This is a div"></div>

当鼠标在 div 上时，会出现一个黄色框。

如果您想使用物理按钮，则必须为每个文本条目创建一个 div 或按钮。

<div onclick="javascript: showTip();">?</div>

在我看来，一种更简洁的方法是使用 占位符（仅适用于输入元素）：

<input type="text" placeholder="Insert your name"/>

输入将包含该文本，直到用户单击文本条目。 占位符属性是 HTML5 中的新特性

【讨论】：

【解决方案2】：

.tooltip {
  border : solid 1px lightgrey;
  color : lightgrey;
  border-radius : 100px;
  font-size : 9px;
  padding-left : 4px;
  padding-right : 4px;  
  margin-left : 4px;
}

.tooltip:hover {
  cursor : pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input placeholder = "target adress" /><span id = "tooltip_targetAdress" class = "tooltip" title = "target adress is used to do things">?</span>

title 属性就是为此而生的。如果您想要更多定制的东西，您将需要处理点击时显示的 div，但对于这样一个简单的事情来说，它的工作量更大。

【讨论】：

谢谢你，工作就像一个魅力:)