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>
            )
        }

    }

Related Query

More Query from same tag