JSFiddle - React, Tailwind, and code Playground

by ashleycam3ron

HTML

<img class="logo button" />
<img class="logo button1" />

<p class="info">here is some info</p>

<p class="info1">here is some info too</p>

<a href="#" title="Sample tooltip" class="tooltip">Link</a>

CSS

.info, .info1 {
    display:none;
    -moz-box-shadow: 0px 0px 4px #333; 
    -webkit-box-shadow: 0px 0px 4px #333; 
    box-shadow: 0px 0px 4px #333; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    background:red;
    position:absolute;
    padding:10px;
    left:-10%;
    top:-10px;
   position:absolute;
}
img {width:50px; height:50px; background:black;}


 .tooltip{display:inline;position:relative}
 .tooltip:hover{text-decoration:none}
 .tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   bottom:18px;
   color:#fff;
   content:attr(title);
   display:block;
   left:50%;
   padding:5px 15px;
   position:absolute;
   white-space:nowrap;
   z-index:98
  }
  .tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:12px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
   }

JavaScript

$('.button').hover(function() {
    $('.info').fadeToggle();
});

$('.button1').hover(function() {
    $('.info1').fadeToggle();
});