<article>
  <ul>
    <li class="icon1">
      <span>a</span>
      <!-- tooltip pure css3 -->
      <label>What time is it? Forget it, I'm on vacations...</label>
    </li>
    <li class="icon2">
      <span>b</span>
      <!-- tooltip pure css3 -->
      <label>Are you sure you wanna search me?...</label>
    </li>
    <li class="icon3">
      <span>c</span>
      <!-- tooltip pure css3 -->
      <label>F%$#+, those graphs are bad! I will not be paid off...</label>
    </li>
  </ul>
</article>
@font-face {
    font-family: 'IconBlack';
    src: url('https://cdn.rawgit.com/pedromsduarte/Multicoloured-font-icons-/9faccf44/2012/fonts/iconblack-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IconGray';
    src: url('https://cdn.rawgit.com/pedromsduarte/Multicoloured-font-icons-/9faccf44/2012/fonts/icongray-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'IconOrange';
    src: url('https://cdn.rawgit.com/pedromsduarte/Multicoloured-font-icons-/9faccf44/2012/fonts/iconorange-regular-webfont.woff') format('woff'); 
    font-weight: normal;
    font-style: normal;
}

article {
  position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin-top: -96px;
}

article ul {
	margin: 0;
	padding: 0;
	text-align: center;
}

article li {
	font-size: 8em;
	line-height: 1em;
	display: inline-block;
	position: relative;
	width: 260px;
	cursor: pointer;
}

li span, li span:before, li span:after {
	position: absolute;
	top: 0;
	left: 0;
}

/* watch icon */
.icon1 span:before {
	content: "a";
	color: #F7931D;
	font-family: IconOrange;
	line-height: 162px;
}

.icon1 span {
	color: #383739;
	font-family: IconBlack;
  line-height: 160px;
}

.icon1 span:after {
	content: "a";
	color: #C2B49A;
	font-family: IconGray;
	line-height: 140px;
}

/* search icon */
.icon2 span:before {
	content: "b";
	color: #F7931D;
	font-family: IconOrange;
	line-height: 182px;
}

.icon2 span {
	color: #383739;
	font-family: IconBlack;
	line-height: 192px;
}

.icon2 span:after {
	content: "b";
	color: #C2B49A;
	font-family: IconGray;
	line-height: 226px;
}

/* graph icon */
.icon3 span:before {
	content: "c";
	color: #F7931D;
	font-family: IconOrange;
	line-height: 172px;
}

.icon3 span {
	color: #383739;
	font-family: IconBlack;
  line-height: 164px
}

.icon3 span:after {
	content: "c";
	color: #C2B49A;
	font-family: IconGray;
	line-height: 212px;
}

/* tooltips */
li label
{
	visibility: hidden;
	overflow: hidden;
	height: 0;
	position: absolute;
	font-size: .15em;
	font-family: Helvetica Neue, Helvetica, sans-serif;
	font-weight: lighter;
	line-height: 22px;
	background: #fff;
	padding: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,.25);
	border-radius: 10px;
	border: 3px solid #F7931D;
}

li:hover label
{
	visibility: visible;
	height: auto;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.