JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Other Content - Not Needed -->
<div class="fakeSlide"></div>
<!-- Tooltips -->
<div id="tooltipSeattle" class="dbTooltip" style="display:none;">Seattle!</div>
<div id="tooltipNewYork" class="dbTooltip" style="display:none;">New York!</div>

<!-- Mini Images -->
<div class="mini">
<a href="city.htm"><img class="Seattle" src="http://lorempixel.com/output/city-q-c-50-50-2.jpg" /></a>
<a href="city.htm"><img class="NewYork" src="http://lorempixel.com/output/city-q-c-50-50-3.jpg" /></a>
</div>

CSS

.dbTooltip {
   border-top: 1px solid #b597f7;
   background: #656ad6;
   background: -webkit-gradient(linear, left top, left bottom, from(#4c3e9c), to(#656ad6));
   background: -webkit-linear-gradient(top, #4c3e9c, #656ad6);
   background: -moz-linear-gradient(top, #4c3e9c, #656ad6);
   background: -ms-linear-gradient(top, #4c3e9c, #656ad6);
   background: -o-linear-gradient(top, #4c3e9c, #656ad6);
   padding: 20px 20px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 12px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   position:absolute; 
   margin-top:-50px;
   }

.mini {border:solid 2px #888;margin-top:20px;padding:12px;}
.mini a {margin-right:50px;}

#tooltipSeattle.dbTooltip{}
#tooltipNewYork.dbTooltip{margin-left:100px;}
.fakeSlide {
    height:300px;
    width:100%;
    background:#888;
}

JavaScript

//When you mouseover a mini, look for the class name
$('.mini img').hover(function() {
  var miniClass = $(this).attr("class");
  //When you mouse over, it shows. Match the class name to the tooltip id and class
  $("#tooltip" + miniClass).show();     
});
//Mouseout, it's hidden
$('.mini img').mouseout(function() {
    $(".dbTooltip").hide(); 
});