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>
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>
- 4 What have you tried so far? I see no React code. Please provide a Minimal, Complete, and Verifiable example – Alen Genzić Commented Apr 3, 2019 at 9:38
2 Answers
Reset to default 3
class App extends React.Component{
state = {
title:"HEllo WORLD THIS IS RED!"
}
render(){
let imageSource = "http://tineye./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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>To your App ponent 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>
)
}
}