时间戳

首页 > 解决方案 > 在带有真棒标签的文本区域中添加工具提示

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

问题描述

我在反应项目中遇到问题。在此，我必须在 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>

标签： htmlreactjs

解决方案

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

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

那会更优雅。您也不需要 textarea 上的 type="text" 。

推荐阅读