帮助图标的 ReactJS 工具提示答案

【问题标题】：ReactJS Tooltip for Help Icon帮助图标的 ReactJS 工具提示
【发布时间】：2018-01-22 06:20:54
【问题描述】：

我在我的反应文本区域添加了一个帮助图标，现在我需要添加一个工具提示来为文本区域提供提示。下面是我的代码sn-p

<div
    style={{
        paddingLeft: '5px',
        paddingRight: '5px'
    }}>

    <div style={{ position: "absolute", width: "94%" }}>   <textarea
        placeholder="Pre-Requisites"
        name="preRequisites"
        onChange={this.handleInputChange}
        value={this.state.preRequisites}
        style={style.textAreaStyle} />
    </div>
    <div data-tip data-for='happyFace'>
        <MdHelp data-tip data-for='happyFace' style={style.helpIconStyle} />
    </div>
    <ReactTooltip id='happyFace' type='error'>
        <span>My Tool</span>
    </ReactTooltip>
</div>

这是我的文本区域的屏幕截图，上面有帮助图标，

谁能帮我添加一个工具提示，在帮助图标上显示一些消息。

【问题讨论】：

检查过 npm 中可用的任何现有反应工具提示组件吗？

标签： reactjs react-native react-router react-redux

【解决方案1】：

除非你想创建一个组件或使用来自 npm 的模块，你可以使用htmltitle 属性：

定义：

title 属性指定有关元素的额外信息。

<textarea title="amazing textarea"> Hello i'm a textarea </textarea>
<span title="amazing span"> Hello i'm a span </span >

【讨论】：

【解决方案2】：

尝试在您的textarea style 中更改position:"relative"

【讨论】：