JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<a href="http://maps.google.com/" title="This is link to google map" class="map">Our Map</a>
<div class="phone-number" title="Office Phone">+1 718 395 7777</div>

CSS

body { padding: 10%; font: normal 20px Arial; }
.phone-number:hover:after,
.map:hover:after { 
    content: "  ← " attr(title) " "; 
    position: absolute;
    color: #fff;
    background: #333;
    padding: 10px; margin: -8px 0 0 10px;
}
.phone-number:before {
    content: "☎";
    font-size: 25px;
}