.tooltip {
    margin: 50px 0;
  }
  
  .tooltip-content {
    opacity: 0;
    visibility: hidden;
    font-size: 70%;
    white-space: nowrap;
    border-radius: 5px;
    background: #555;
    color: #fff;
    padding: 5px 10px;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.2s ease-in-out;
  }
  
  .icon-tooltip .tooltip-content {
    font-size: 50%;
    padding-bottom: 9px;
    top: -40px;
  }
  
  .tooltip-content:before {
      content: '';
      position: absolute;
      bottom: -18px;
      left: calc(50% - 9px);
      border: 9px solid transparent;
      border-top: 9px solid #555;
  }
  
  .text-tooltip:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
  }
    
  .text-tooltip {
    border-bottom: dotted 1px #333;
    position: relative;
  }