Beat - tooltips

HTML

<link rel="stylesheet" href="https://beat.today/stylesheets/style.css">
<span class="tooltip-wrapper">
  <div class="tooltip-area">
    <div class="tooltip">
      <div class="tooltip-content">
        <span class="text">Yo!</span>
      </div>
    </div>
  </div>
  
  <span class="text">
    Default tooltip
  </span>
</span>

<span class="tooltip-wrapper">
  <div class="tooltip-area on-top">
    <div class="tooltip">
      <div class="tooltip-content">
        <span class="text">Some super long text like description or something that long</span>
      </div>
    </div>
  </div>
  
  <span class="text">
    On-top tooltip
  </span>
</span>

<span class="tooltip-wrapper">
  <div class="tooltip-area on-top">
    <div class="tooltip">
      <div class="tooltip-content">
        <span class="text">Some text</span>
      </div>
    </div>
  </div>
  
  <span class="text">
    On-top tooltip
  </span>
</span>

<span class="tooltip-wrapper active">
  <div class="tooltip-area centered">
    <div class="tooltip">
      <div class="tooltip-content">
        <span class="text">Yo!</span>
      </div>
    </div>
  </div>
  
  <span class="text">
    Centered tooltip
  </span>
</span>

CSS

body{
  padding: 200px 100px;
  background: #f2f2f2;
}

.tooltip-wrapper {
  margin: 10px;
}

/* TOOLTIP */

.tooltip-wrapper {
  position: relative;
}

.tooltip-area{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  max-width: 100%;
  padding: 40px 15px 5px;
  margin: -5px 0 0 -15px;
  display: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.tooltip-wrapper:hover .tooltip-area{
  display: block;
}

.tooltip-area.on-top{
  margin-top: 0px;
  bottom: 0;
  top: auto;
}

.tooltip-area.centered{
  /* margin-left: 0; */
}

.tooltip {
  position: relative;
  background: rgba(16,25,45,0.9);
  color: #fff;
  padding: 10px 15px;
  border-radius: 7px;
  font-size: 9pt;
  margin-top: 10px;
  transition: 0.2s ease-out;
  opacity: 0;
}

.tooltip-area.on-top .tooltip{
  bottom: 30px;
  top: auto;
  margin-top: -10px;
  margin-bottom: 10px;
}

.tooltip-area.centered .tooltip{
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}

.tooltip-area:hover .tooltip{
  margin-top: 0;
  margin-bottom: 10px;
  opacity: 1;
}

.tooltip-area.on-top:hover .tooltip{
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip:before{
  content: '';
  position: absolute;
  top: -20px;
  left: 9px;
  border-style: solid;
  border-width: 10px;
  border-color: transparent;
  border-bottom-color: rgba(16,25,45,0.95);
}

.tooltip-area.on-top .tooltip:before{
   top: auto;
   bottom: -20px;
   border-color: transparent;
   border-top-color: rgba(16,25,45,0.9);
}

.tooltip-area.centered .tooltip:before{
  left: 0;
  right: 0;
  width: 0;
  margin: auto;
}


/* TOOLTIP END*/