<nav class="sidebar-navigation">
  <ul>
    <li class="active">
      <i class="fa fa-share-alt"></i>
      <span class="tooltip">Connections</span>
    </li>
    <li>
      <i class="fa fa-hdd-o"></i>
      <span class="tooltip">Devices</span>
    </li>
    <li>
      <i class="fa fa-newspaper-o"></i>
      <span class="tooltip">Contacts</span>
    </li>
    <li>
      <i class="fa fa-print"></i>
      <span class="tooltip">Fax</span>
    </li>
    <li>
      <i class="fa fa-sliders"></i>
      <span class="tooltip">Settings</span>
    </li>
  </ul>
</nav>

//Basics
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Lato', sans-serif;
  line-height: 1;
}

body {
  background-color: #F5F6F8;
  overflow: hidden;
}

//Color Variables
$sidebar-background-color: #313443;
$active-sidebar-link-color: #22252E;
$hover-sidebar-link-color: $active-sidebar-link-color;
$active-link-color: #98D7EC;
$tooltip-background-color: $sidebar-background-color;

.sidebar-navigation {
  display: inline-block;
  min-height: 100vh;
  width: 80px;
  background-color: $sidebar-background-color;
  float: left;
  
  ul {
    text-align: center;
    color: white;
    
    li {
      padding: 28px 0;
      cursor: pointer;
      transition: all ease-out 120ms;
      
      i {
        display: block;
        font-size: 24px;

        transition: all ease 450ms;
      }
      
      .tooltip {
        display: inline-block;
        position: absolute;
        background-color: $tooltip-background-color;
        padding: 8px 15px;
        border-radius: 3px;
        margin-top: -26px;
        left: 90px;
        opacity: 0;
        visibility: hidden;
        font-size: 13px;
        letter-spacing: .5px;
        
        &:before {
          content: '';
          display: block;
          position: absolute;
          left: -4px;
          top: 10px;
          transform: rotate(45deg);
          width: 10px;
          height: 10px;
          background-color: inherit;
        }
      }
      
      &:hover {
        background-color: $hover-sidebar-link-color;
        
        .tooltip {
          visibility: visible;
          opacity: 1;
        }
      }
      
      &.active {
        background-color: $active-sidebar-link-color;
        
        i {
          color: $active-link-color;
        }
      }     
    }
  }
}

$('ul li').on('click', function() {
  $('li').removeClass('active');
  $(this).addClass('active');
});