<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<h1>Social icons with tooltips</h1>
<h2>CSS (SASS) ONLY</h2>

<div class="social">

  <a class="social-icon" data-tooltip="email@gmail.com" href="mailto:email@gmail.com">
    <i class="fa fa-envelope" aria-hidden="true"></i>
  </a>

  <a class="social-icon" data-tooltip="GitHub" href="https://github.com/puikinsh">
    <i class="fa fa-github" aria-hidden="true"></i>
  </a>

  <a class="social-icon" data-tooltip="LinkedIn" href="https://www.linkedin.com/company/colorlib">
    <i class="fa fa-linkedin" aria-hidden="true"></i>
  </a>

  <a class="social-icon" data-tooltip="Twitter" href="https://twitter.com/colorlib">
    <i class="fa fa-twitter" aria-hidden="true"></i>
  </a>

  <a class="social-icon" data-tooltip="Facebook" href="https://www.facebook.com/colorlib">
    <i class="fa fa-facebook" aria-hidden="true"></i>
  </a>

  <a class="social-icon" data-tooltip="YouTube" href="https://www.youtube.com/c/Colorlib">
    <i class="fa fa-youtube" aria-hidden="true"></i>
  </a>
  <a class="social-icon" data-tooltip="YouTube" href="https://instagram.com/Colorlib">
    <i class="fa fa-instagram" aria-hidden="true"></i>
  </a>

</div>

<a href="https://colorlib.com/wp/html-social-buttons-templates/" target="blank">More Icon Examples</a>
// Importing bourbon to make things easy: http://bourbon.io/
@import "bourbon"

// Useful mixins
@mixin border-radius($radius: 4px)
  @include prefixer(border-radius, $radius, webkit moz spec)

@mixin box-sizing($box-model)
  @include prefixer(box-sizing, $box-model, webkit moz spec)
    
//useful for animation
@include keyframes(fadeInRight)
  0%
    opacity: 0
    @include transform(translateX(1.334em) translateZ(0))
  100%
    opacity: 1

@mixin fadeInRight($dur: 1s, $delay: 0s, $fill: forwards)
  @include prefixer(animation, fadeInRight $dur $delay $fill, webkit spec)

    
/* General styles */

body
  background-color: white
  font-family: 'Lato', Arial, sans-serif
  text-align: center
  padding-top: 30px
  
h1
  font-size: 2em
  color: #666
  
h2, a
  font-size: 1em
  color: #77cc6d
  
.social
  margin: 60px auto
  
/* ============================ */
/* SOCIAL ICONS                 */
/* ============================ */

$color-base: #00B285
$num-buttons: 7
$speed: 0.6s

.social-icon
  @include prefixer(background-clip, padding-box, webkit moz spec)
  @include box-sizing(border-box)
  @include border-radius(3px)

  @include transition-property(background-color)
  @include transition-duration(0.5s)
  @include transition-timing-function(ease)

  background-color: #c4c4c4
  text-align: center
  display: inline-block
  width: 40px
  height: 38px
  padding: 9px 0px
  color: white
  margin: 2px
  
  /* Color each button differently */
  @for $i from 1 through $num-buttons
    &:nth-child(#{$i})
      /* Animation */
      @include fadeInRight($speed, ($i/4) * 1s )
      opacity: 0
      /* Color */
      &:hover,
      &:active,
      &:focus
        opacity: 1
        background-color: adjust-hue( $color-base, $i * 7%)
  
  img
    width: 20px
    
/* ============================ */
/* TOOLTIP                      */
/* ============================ */

$tooltip-height: 22px
$tooltip-arrow-size: 5px
$tooltip-color: #323232
$tooltip-color-text: #ecf0f1

[data-tooltip]
  position: relative
  
  &:before,
  &:after
    @include transform(translateX(-50%))
    @include box-sizing(content-box)
    @include position(absolute, 100% null null 50%)
    
    @include transition-property(opacity)
    @include transition-duration(0.2s)
    @include transition-timing-function(linear)
      
    position: absolute
    left: 50%
    top: 100%
    bottom: 100%
    visibility: hidden
    opacity: 0
    z-index: 9999
    // Force Hardware Acceleration
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0)
    
  /* tooltip arrow */   
  &:before
    content: ''
    border-color: $tooltip-color
    border-style: none
    border: $tooltip-arrow-size solid transparent
    border-bottom: $tooltip-arrow-size +1px solid $tooltip-color
    margin-top: $tooltip-arrow-size * -1 + 1

  /* tooltip box */
  &:after
    content: attr(data-tooltip)
    @include border-radius(3px)
    width: auto
    height: $tooltip-height
    padding: $tooltip-height/2 $tooltip-height/2 0 $tooltip-height/2
    font-size: 13px
    line-height: $tooltip-height/2
    white-space: nowrap
    background-color: $tooltip-color
    color: $tooltip-color-text
    margin-top: 7px
      
  &:hover,
  &:focus
    background-color: transparent
    &:before,
    &:after
      @include transform(translate(-50%, 0))
      opacity: 1
      visibility: visible
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.