<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<div id="container">
  <ul>
    <li><a href="#" title="Tooltip 01">Hover me</a></li>
    <li><a href="#" title="Tooltip 02">NO, hover me</a></li>
    <li><a href="#" title="Tooltip 03">What? Leave them and do me!!</a></li>
  </ul>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio magnam dolorem quia. Neque in cum et quae ratione iste fuga.</p>
</div>
@import "compass/css3";

@import "compass/reset";
html, body {
  font: 1.2em/1 'Open Sans Condensed', sans-serif;
}

#container {
  width: 90%;
  margin: 3em auto;
  text-align: center;
}
a {
  color: #ffffff;
  text-decoration: none;
}
p {
  float: left;
  padding-top: 1em;
}
ul {
  
  li{
    width: 33%;
    position: relative;
    float: left;
    background: tomato;
    
    a {
      display: inline-block;
      width: 100%;
      padding: 1em 0;
      vertical-align: middle;
      
      &:before, &:after {
        opacity:0;
      }
      &:before {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          top: 3.1em; 
          left: 50%;
          margin-left: -8px;
          border-right: 16px solid transparent;
          border-bottom: 10px solid lightskyblue;
          border-left: 16px solid transparent;
      }
      &:after {
          content: attr(title);
          width: 0;
          height: 0;
          position: absolute;
          top: 3em;
          left: 50%;
          margin-left: -100px;
          padding: .5em 0;
          background: lightskyblue;
      }
      
      &:hover {
        background: darken(tomato, 4); 
          &:before,&:after {
            opacity: 1;
          
          -webkit-transition: opacity .2s ease, top .5s ease;
          -moz-transition: opacity .2s ease, top .5s ease;
          -ms-transition: opacity .2s ease, top .5s ease;
          -o-transition: opacity .2s ease, top .5s ease;
          transition: opacity .2s ease, top .5s ease;
          }
            
          &:after {
            width: 200px;
            height: auto;
            top: 3.5em;
          }
      }
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js