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>
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>
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>
)
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.