JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="maptt">
                
                <!-- tooltip2-->
  <a href="#" class="tooltip1">
    <img src="http://coreneto.com/delete/hover.png" />
    <span>
        <img class="callout" />
        <img src="http://coreneto.com/delete/hover-big.png" style="float:right;" /><strong style="font-size:16px;">First</strong>
    </span>
</a>
   <!-- סיום אפסנאות ב-->                         
                            </div>
   
         <div class="mapttlish">
                
                <!-- tooltip2-->
  <a href="#" class="tooltip1">
    <img src="http://coreneto.com/delete/hover.png" />
    <span>
        <img class="callout" />
        <img src="http://coreneto.com/delete/hover-big.png" style="float:right;" /><strong style="font-size:16px;">Second</strong>
    </span>
</a>
   <!-- סיום לשכה -->                         
                            </div>

CSS

.maptt {margin-left: 350px;
    text-align: center;
    margin-top: 97px;
     z-index: 200;
    position: absolute;}

.mapttlish {margin-left: 450px;
    text-align: center;
    margin-top: 197px;
     z-index: 200;
    position: absolute;}

/* NewTooltip */

a.tooltip1 {outline:none; }
a.tooltip1 strong {line-height:30px;}
a.tooltip1:hover {text-decoration:none;} 
a.tooltip1 span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:-30px; margin-left:28px;
    width:300px; line-height:16px;
}
a.tooltip1:hover span{
    display:inline; position:absolute; color:#111;
    border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
    
/*CSS3 extras*/
a.tooltip1 span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #CCC;
}