如何在网站上添加帮助文本？

Question

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

我需要将帮助 link 添加到表单的文本框中。例如我有一个带有 "target address" 标签的文本框，我想在该标签前添加一个小问号 just like this ，这样当用户点击它时，它会显示文本 "enter the ip address to trigger the target device" . 我想在每个文本框标签前添加帮助link，以便用户可以看到他应该输入的内容和格式的详细信息。

Answer 1

我建议 title 属性:

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

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

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

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

在我看来，更简洁的方法 是使用 placeholder（仅用于输入元素）：

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

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

中的新属性

Answer 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，但对于这样一个简单的东西，它需要更多的工作。

如何在网站上添加帮助文本？

how to add help text on websites?

javascript

html

forms

textbox