<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <body>
   <ul>
     <li>
       <i class="fa fa-bed" aria-hidden="true"></i>
       <span>Удобные номера</span>
     </li>
     <li>
       <i class="fa fa-cc-visa" aria-hidden="true"></i>
       <span>Кредитные карты</span>
     </li>
     <li>
       <i class="fa fa-shower" aria-hidden="true"></i>
       <span>Душ в номере</span>
     </li>
	 <li>
       <i class="fa fa-coffee" aria-hidden="true"></i>
       <span>Завтрак включен</span>
     </li>
     <li>
       <i class="fa fa-paw" aria-hidden="true"></i>
       <span>Питомцы OK</span>
     </li>
   </ul>
  </body>

CSS

body {
  margin: 0;
  padding: 0;
}

ul {
  margin: 10% 30%;
  display: flex;
  font-family: 'Lato', sans-serif;
}

ul li {
  list-style: none;
  position: relative;
  width: 75px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #cecfcf;
  color: #fff;
  font-size: 40px;
  transition: .5s;
}

ul li:hover {
 color: #03a9f4;
 cursor: pointer;
}

ul li span {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 120px;
  height: 24px;
  line-height: 24px;
  background: #03a9f4;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  transition: .5s;
  opacity: 0;
  visibility: hidden;
  border: 1px solid red;
}

ul li:hover span {
  opacity: 1;
  visibility: visible;
  transition: .5s ease-in-out;
  z-index: 1;
}

ul li span:before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: rotate(45deg) translateX(-50%);
  width: 10px;
  height: 10px;
  background: #03a9f4;
  z-index: -1;
}