How to add tooltip to an item which is in a list in react

Question

{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 })
  }

When I mouse over on one item in list, it shows tooltip for all items, but I wanted to show a tooltip only for the item which is selected, as you can see below:

demo

Native tooltips in HTML are defined using the `title=""` attribute. But it looks like you're using a custom CSS-based tooltip using that `
` element. How do you want the tooltip to work? — Dai, Mar 21 '19 at 07:44
https://stackoverflow.com/questions/34423644/tooltip-div-with-reactjs you can check this link — errorau, Mar 21 '19 at 07:45
@ahmeturganci I'm able to show the tooltip but when I Mouse over on one element in a list it is showing tooltip for all elements — Navya, Mar 21 '19 at 07:50
Hello! Can you add the code of `handleover` function? And can you add a screenshot of the tooltip, so that we can have a visual feedback of the problem :) — Jolly, Mar 21 '19 at 07:58
@ahmeturganci I have added the screenshot of tooltip,please suggest the changes to show a tooltip for item which is selected — Navya, Mar 21 '19 at 09:25

score 1 · Answer 1 · answered Mar 21 '19 at 11:36

I wrote one example for you it's work for me I created a tooltip component and if you want you can use this. Code this below link 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')
);

How to add tooltip to an item which is in a list in react

1 Answers1