Custom Title in React.js

Question

Hi I Have an img with the title attribute that I would like to customize in react.js however I am new to it. I have done an example in HTML & CSS which is possible. The below is the equivalent HTML & CSS version. Please Help me to convert it in React.js

<!DOCTYPE html>
<html>
<body>
<style>
span:hover {
    position: relative;
}

span[title]:hover:after {
     content: attr(title);
     padding: 40px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 1;
     background:red;
}
</style>
<span title="HEllo WORLD THIS IS RED!"> 
<img src="smiley.gif" alt="Smiley face HEY HEY HEY" width="42" height="42" >
</span>
</body>
</html>

What have you tried so far? I see no React code. Please provide a Minimal, Complete, and Verifiable example — Alen Genzić
– Alen Genzić, Commented Apr 3, 2019 at 9:38

Engineer · Accepted Answer · 2019-04-03 10:08:05Z

class App extends React.Component{
  state = {
    title:"HEllo WORLD THIS IS RED!"
  }

  render(){
    let imageSource = "http://tineye.com/images/widgets/mona.jpg"; 
    return(
      <div>
       <span title={this.state.title}> 
        <img src={imageSource} alt="Smiley face HEY HEY HEY" width="42" height="42" />
      </span>
      </div>
    )
  }
}

ReactDOM.render(<App/> , document.getElementById('root'));

span:hover {
    position: relative;
}

span[title]:hover:after {
     content: attr(title);
     padding: 40px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 1;
     background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
  <div id="root"></div>
</body>

Erick · Accepted Answer · 2019-04-03 09:57:25Z

0

To your App component you can directly add the image and place the span inside the jsx

class App extends React.Component {
        render(){
            return (
                <React.Fragment>
                    <span>HEllo WORLD THIS IS RED!</span>
                    <img src="your image source" alt="image" />
                </React.Fragment>
            )
        }

    }

answered Apr 3, 2019 at 9:57

Erick

1,1461 gold badge12 silver badges25 bronze badges

Collectives™ on Stack Overflow

Custom Title in React.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related