JSFiddle - React, Tailwind, and code Playground

by muavenet

HTML

<a id="tooltip" class="tooltip" href="#" title="Kapak resmi"> 
 <img src="http://icons.iconarchive.com/icons/umut-pulat/tulliana-2/128/index-img-icon.png" /></a>

CSS

.tooltip {
            color: #000000; 
            cursor: help; 
            position: absolute;
            z-index:1;
            top:25px;
            width:32px !important;
            height:18px !important;
            }          

            .tooltip:hover {
                color: #c00;
                text-decoration: none;
            }

            .tooltip:hover:after {
                background: #111;
                background: rgba(0,0,0,.8);
                border-radius: .9em;
                bottom: 0.9em;
                color: #fff;
                content: attr(title);
                display: block;
                left: 1em;
                padding: .3em 1em;
                position: absolute;
                text-shadow: 0 1px 0 #000;
                white-space: nowrap;
                z-index: 98;
            }

            .tooltip:hover:before {
                border: solid;
                border-color: #111 transparent;
                border-color: rgba(0,0,0,.8) transparent;
                border-width: .4em .4em 0 .4em;
                bottom: 0.5em;
                content: "";
                display: block;
                left: 1.9em;
                position: absolute;
                z-index: 99;
            }