在带有真棒标签的文本区域中添加工具提示答案

【问题标题】：Adding tooltips in textarea with awesome tag在带有真棒标签的文本区域中添加工具提示
【发布时间】：2019-07-22 20:21:46
【问题描述】：

我在 React 项目中遇到问题。在此，我必须在 textarea 标签中添加工具提示

当我用输入标签替换 textarea 标签时，我得到了工具提示，但标签必须是 textarea

<section>

  <label className="label">Help Text</label>
  <label className="input"> <i className="icon-append fa fa-file-text-o"></i>

<textarea row="3" style={{minWidth: "100%"}} id="cHelpText" type="text"  className="custom-scroll" onChange={this.handleChange} ></textarea>

<b className="tooltip tooltip-top-right"><i className="fa fa-file-text-o txt-color-teal"></i></b>

</label>

</section>

【问题讨论】：

这里我正在纠正自己，我们可以通过将 className="input" 替换为 className="textarea" 来查看工具提示。非常感谢您的支持

标签： html reactjs

【解决方案1】：

我建议不要使用需要悬停状态（因此需要鼠标）的工具提示来使用占位符属性，然后它可以在移动设备和桌面设备上使用。然后它在页面加载时也可见，这更有帮助 - 最终目的是引导用户。

<textarea row="3" style={{minWidth: "100%"}} placeholder="help text here" onChange={this.handleChange} ></textarea>

这样会更优雅。您也不需要在 textarea 上使用 type="text"。

【讨论】：

【解决方案2】：

您可以将 textarea 包装在 div 中，然后在悬停时显示或隐藏工具提示 -

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div class="tooltip">
 <textarea></textarea>
 <span class="tooltiptext">Tooltip text</span>
</div>

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

【讨论】：