CODEWITHSUNDEEP
javascriptreactjsecmascript-6
MIkle
MIkle

Reputation: 69

React show block with information on hover

I have a lot of blocks with items. I want to show item information (block near the item), when user hover on it. Here is an example: First example Second example

Upvotes: 0

Views: 7052

Answers (1)

Rajan Lagah
Rajan Lagah

Reputation: 2528

You can achieve this in react by.

class nameOfClass extends React.Component{
  constructor(props){
    super(props)
    this.state = {
     box1Hover:false,
     box2Hover:false,
     box3Hover:false,
     box4Hover:false,
    }
    this.trueDisplay = this.trueDisplay.bind(this)
    this.falseDisplay = this.falseDisplay.bind(this)
  }
  trueDisplay(e){

   this.setState({[e.target.name]:true})
  }
  falseDisplay(e){

   this.setState({[e.target.name]:false})
  }
  render(){
   return(
      <div>
       <div name="box1Hover" onMouseEnter={this.trueHover} onMouseLeave={this.falseHover}>
         ....
          // your on hover content in bellow line 
         {this.state.box1Hover?<h5>Mouse hovering over me</h5>:""}
        ....
       <div>
       <div name="box2Hover" onMouseEnter={this.trueHover} onMouseLeave={this.falseHover}>
         ....
          // your on hover content in bellow line 
         {this.state.box2Hover?<h5>Mouse hovering over me</h5>:""}
        ....
       <div>
       <div name="box3Hover" onMouseEnter={this.trueHover} onMouseLeave={this.falseHover}>
         ....
          // your on hover content in bellow line 
         {this.state.box3Hover?<h5>Mouse hovering over me</h5>:""}
        ....
       <div>
      </div>
   )
  }
}

if you know jquery then you can use tooltip https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Upvotes: 2

Related Questions