JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stage">
    <div class="dealFinder">
      <h2 class="title">Deal Finder in Your Area</h2>
      <table cellpadding="5">
          <tr>
          <td class="text">
              <p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p>
            <a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a>
            <div class="tooltip">
              <div class="inner">
                <b>2012 Land Rover Range Rover Evoque</b>
                <span>Your Price $19,330</span>
                <p>The Web2Carz National Average is <b>$21,500</b></p>
              </div>
            </div>
          </td>
            <td class="pic">
              <a href="#"><img src="http://placehold.it/113x75" /></a>
          </td>
        </tr>
        <tr>
          <td class="text">
            <p class="makeModel"><a href="#">2012 Land Rover Range Rover Evoque</a><br>in Oak Lawn</p>
            <a class="youSave" href="#" onclick="return false"> You Save at Least $14,810</a>
            <div class="tooltip">
              <div class="inner">
                <b>2012 Land Rover Range Rover Evoque</b>
                <span><small>Your Price</small> $19,330</span>
                <p>The Web2Carz National Average is <b>$21,500</b></p>
              </div>
            </div>
          </td>
          <td class="pic">
            <a href="#"><img src="http://placehold.it/113x75" /></a>
          </td>
        </tr>
      </table>
    </div><!-- .dealFinder -->
</div>

CSS

.stage .dealFinder {
    position:relative;
    width:300px;
    height:100%;
    vertical-align:top;
    margin:0 0 0 15px;
    padding:20px 0 0 0;
    background-image:url(/images/rd/block_header_bg.png);
    background-repeat:no-repeat;
    background-position:top left;
    z-index:10;
}
.stage .dealFinder .title {
    color:#fff;
    margin:1px 0 0 10px;
    top:2px;
    left:0px;
    padding:0;    
    font-size:16px;
    position: absolute;
}
.stage .dealFinder table {
    margin:0;
    padding:0;
}
.stage .dealFinder table tr {
    display:block;
    margin:10px 0; 
}
.stage .dealFinder table tr td {
    position:relative;
    background-color:#D6D6D6;
    padding:5px;
    vertical-align:middle;
}
.stage .dealFinder table tr td .makeModel {
    display: block;
    position: relative;
    padding: 5px;
    margin: 0 0 5px 0;
    background-color: #fff;
    border-radius:5px;
}
.stage .dealFinder table tr td .makeModel a {
    font-weight:bold;
    font-size: 12px;
}
.stage .dealFinder table tr td .youSave {
    display: block;
    position: relative;
    width:95%;
    height:20px;
    background-color: #339900;
    border-radius:10px 0 0 10px;
    color:#ffffff;
    font-size: 11px;
    line-height:20px;
    white-space:nowrap;
    text-align: center;
}
.stage .dealFinder table tr td .youSave:hover {
    text-decoration: none;
}
.stage .dealFinder table tr td .youSave:after {
  content:"";
  position:absolute;
  right:0px;
  top:0;
  margin-right:-20px;
  width:0;
  height:0;
  border-left:10px solid #339900;
  border-right:10px solid transparent;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.stage .dealFinder table tr td .tooltip {
    display: block;
    position: absolute;
    width: 150px;
    height:auto;
    bottom:25px;
    left:0px;
    padding: 10px;
    border:1px solid #ccc;
    background-color: rgba(255, 255, 255, .5);
    box-shadow: 0px 3px 7px 1px rgba(0, 0, 0, .35);
    border-radius: 5px;
    z-index:...

JavaScript

$(document).ready(function() {
    // Tooltip
    $('.tooltip').hide();
    $('.text').each(function(e) {
      var self = this;
      var tooltip = $(self).find('.tooltip');
      var youSave = $(self).find('.youSave');
      $(youSave).mouseenter(function(e) {
        $(self).find(tooltip).fadeIn("slow");
      });
      $(youSave).mouseleave(function(e) {
        $(self).find(tooltip).fadeOut("fast");
      });
    });
});