Question

我创建了一个包含基本表格和表格的网站，我正在使用表格中以组织方式显示数据的表格进入。

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

Answer 1

我建议标题属性：

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

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

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

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

在我看来，

更清晰的方法将使用占位符（仅适用于输入元素）：

<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，但这对于这么简单的事情来说更有用。

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

2 个答案: