如何将工具提示添加到反应列表中的项目答案

【问题标题】：How to add tooltip to an item which is in a list in react如何将工具提示添加到反应列表中的项目
【发布时间】：2019-03-21 07:41:21
【问题描述】：

{this.state.filteredData.map((row,index) => ( 
       <div key={row.id}onMouseOver={this.handleover.bind(this,index)} onMouseOut={this.handleout.bind(this)}/*onClick={()=>this.onselect(this.state.keyword + row.keywordValue)}*/>  
             <ul key={row.id}>
                  <li key={row.id}>{row.keywordValue}</li>
                  <div key={index} style={tooltipStyle}>tooltip</div>
              </ul>
        </div>
))}

// [...]

  handleover(index) {
        this.setState({ hover: true})
  }

  handleout() {
    this.setState({ hover: false })
  }

当我将鼠标悬停在列表中的一个项目上时，它会显示所有项目的工具提示，但我想仅显示所选项目的工具提示，如下所示：

【问题讨论】：

HTML 中的原生工具提示是使用title="" 属性定义的。但看起来您正在使用 <div> 元素使用自定义的基于 CSS 的工具提示。您希望工具提示如何工作？
stackoverflow.com/questions/34423644/tooltip-div-with-reactjs你可以查看这个链接
@ahmeturganci 我可以显示工具提示，但是当我将鼠标悬停在列表中的一个元素上时，它会显示所有元素的工具提示
喜欢这个codepen.io/andrewerrico/pen/OjbvvW ?
您好！可以添加handleover函数的代码吗？并且可以添加工具提示的截图，以便我们可以对问题进行视觉反馈:)

标签： javascript reactjs

【解决方案1】：

我为您编写了一个示例，这对我很有用。我创建了一个工具提示组件，如果您愿意，可以使用它。在下面的链接中编码 https://jsfiddle.net/zwemLjc3/1/

Tooltip.js

class Tooltip extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      displayTooltip: false
    }
    this.hideTooltip = this.hideTooltip.bind(this)
    this.showTooltip = this.showTooltip.bind(this)
  }

  hideTooltip () {
    this.setState({displayTooltip: false})

  }
  showTooltip () {
    this.setState({displayTooltip: true})
  }

  render() {
    let message = this.props.message
    let position = this.props.position
    return (
      <span className='tooltip'
          onMouseLeave={this.hideTooltip}
        >
        {this.state.displayTooltip &&
        <div className={`tooltip-bubble tooltip-${position}`}>
          <div className='tooltip-message'>{message}</div>
        </div>
        }
        <span 
          className='tooltip-trigger'
          onMouseOver={this.showTooltip}
          >
          {this.props.children}
        </span>
      </span>
    )
  }
}

** Hello.js **

class Hello extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    };
  }

 render() {
    const data =[{"name":"test1","tooltip":"AAAAAAAAA"},{"name":"test2","tooltip":"BBBBBB"}];
    return (
      <div className='container'>

      {data.map(function(d, idx){
      return (
     <p key={idx} >{d.name} <Tooltip message={d.tooltip} position={'right'}>{d.tooltip}</Tooltip></p>
      )
       })}
      </div>


    );
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

【讨论】：