JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div class="mini">
    <div class="table-row">
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
    </div>
    <div class="table-row">
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
    </div>
    <div class="table-row">
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
    </div>
    <div class="table-row">
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
    </div>
    <div class="table-row">
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
        <div class="dot hint hint--smart-top" data-hint="hi"></div>
    </div>
</div>

CSS

.dot {
    height:20px;
    width:20px;
    background-color:red;
    border-radius:20px;
}
.table-row {
  /* The first row needs to have tooltips at the bottom */
}
.table-row .hint {
  position: relative;
  display: inline-block;
}
.table-row .hint--rounded:after {
  border-radius: 4px;
}
.table-row .hint:before, .table-row .hint:after {
  position: absolute;
  opacity: 0;
  z-index: 1000000;
  pointer-events: none;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  transition: 0.3s ease;
}
.table-row .hint:hover:before, .table-row .hint:hover:after {
  opacity: 1;
}
.table-row .hint:before {
  content: '';
  position: absolute;
  background: transparent;
  border: 6px solid transparent;
  z-index: 1000001;
}
.table-row .hint:after {
  content: attr(data-hint);
  background: #383838;
  color: white;
  text-shadow: 0 -1px 0px black;
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Styles for First Row */
.table-row:first-child .hint--smart-top:before {
  border-bottom-color: yellow;
  border-top: 0;
}
.table-row:first-child .hint--smart-top:before {
  margin-bottom: 26px;
}
.table-row:first-child .hint--smart-top:after {
  margin-left: -18px;
}

.table-row:first-child .hint--smart-top:before {
    top: 90%;
}
.table-row:first-child .hint--smart-top:after {
  top: 100%;
  left: 50%;
  bottom: auto;
}

/* Styles for all rows */
.table-row:first-child .hint--smart-top:hover:before,
.table-row:first-child .hint--smart-top:hover:after {
  -webkit-transform: translateY(8px);
}

.table-row .hint--smart-top:before { margin-bottom: -12px; }
.table-row .hint--smart-top:after { margin-left: -18px; }
.table-row .hint--smart-top:before {
  border-top-color: yellow;
}
.table-row .hint--smart-top:before,
.table-row .hint--smart-top:after {
  bottom: 100%;
  left: 50%;
}
.table-row .hint--smart-top:hover:before,
.table-row .hint--smart-top:hover:after {
  -webkit-transform: translateY(-8px);
}