score:2
Accepted answer
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>
score: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>
)
}
}
Source: stackoverflow.com
Related Query
- Show bootstrap modal with custom title using React JS
- Custom overlay button and title on youtube video embedding into react
- How to provide a custom style to React navigation drawer screen title
- React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function
- Creating custom function in React component
- React Formik : how to use custom onChange and onBlur
- react custom hooks vs normal functions, what is the difference
- How to mock react custom hook returned value?
- Is it possible to set a className on custom react components?
- How to handle dependencies array for custom hooks in react
- How to use absolute path to import custom scss, when using react + webpack?
- React Router with custom history not working
- React Typescript - Adding custom attribute
- Custom mailchimp signup form in React
- True custom attributes (e.g. Microdata) in React
- confusion about this React custom hook usage
- styled-components not applying style to custom functional react component
- React Material UI: How to give a button a custom color when disabled?
- the title prop of a button must be a string - react native
- Proptypes for custom react hooks
- React Context API not working from custom NPM component library
- Custom font not working in React Native
- How to mock a custom hook inside of a React component you want to test?
- FontFamily React Native App overwrite with device custom font (Samsung & Oppo)
- Swiper React | How to create custom navigation/pagination components using React refs?
- How to include custom JS files in to React create app
- Mocha, Enzyme: Unit testing custom functions in react component using enzyme
- React Custom Hooks fetch data globally and share across components?
- Custom alert dialog in react native?
- React Router v4 baseName and custom history
More Query from same tag
- Change the text with specific checkbox is clicked
- JavaScript Object giving different values when accessed directly
- My MERN app is deployed on Namecheap / cPanel but it's not accessing Mongo Atlas DB
- react-final-form with multiple select
- Allow only numbers in React by onKeyPress or onKeyDown
- Using `"homepage"` in package.json, without messing up paths for localhost
- Command "yarn run build" exited with 1. Vercel deploy
- react-native: command not found
- How can I apply page specific Full screen background image using React?
- setTimeout in React, not being able to clear
- disptach action error, value appearing as nested object
- React Redux update item quantity (more than just one increment)
- How can I get the object which has been changed and also the new changed value when Selecting options from the drop down
- Double click required sometimes, but not always
- Firebase cloud function url is not the base url for requests from the frontend
- How to render images in React JS
- group by dropdown list component in React JS
- How can I update my news feed after I add new post
- how to use cp-react-tree-table in my project?
- React index key is not working in the map
- input fields overlapping in layout
- useEffect TypeError: not iterable
- Looping through object and using map doesn't return jsx
- Using ReactJS to store array items across multiple pages
- Dynamically render react list with semantic UI
- Haze about 'setState' in React official doc
- How do I make an element filter in React?
- Can I use two components in the route? How do I use?
- Cannot read property 'errors' of undefined (redux, react)
- Ant design get column index