JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<img class ="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/480px-Infobox_info_icon.svg.png" alt=""/>
        <div class ="info">
            Transcription: Type how your name sounds.<br/> Ex. Julio Santos => Who-le-o San-tos.

        </div>

CSS

.image{
                height:20px;
                width:20px;
                padding-bottom: 5px;
            }
            .info{
                visibility: hidden;
                display: block;
                font-family: 'Roboto', sans-serif;
                font-size: 12px;
                color:#555555;
                background-color:#efefef;
                width:235px;
                padding: 3px 3px 3px 6px;
            }
            .image:hover + .info{
                visibility: visible;
            }