Como hacer un tooltip solo usando CSS

Después de haber estado trabajando en mi primer proyecto me he encontrado a mi mismo utilizando muchíssimo los CSS pseudo-elements :after y :before como también creando muchos triángulos. Al terminar el proyecto vi muy claro como tenía que hacer un tooltip solo usando CSS.

Como podrás ver mis ejemplos están escritos usando Awesome SCSS, más que nada por DRY y por que es muy deivertido e interesnte. Al final del post hay un link para el CSS.


<nav id="container">
 <ul class="nav_bar">
  <li id="settings"> <i class="fa fa-cogs"></i>    </li>
  <li id="home">     <i class="fa fa-home"></i>    </li>
  <li id="about">    <i class="fa fa-user"></i>    </li>
  <li id="archive">  <i class="fa fa-archive"></i> </li>
 </ul>
</nav>

SCSS @mixins


// Mixins and variables for all tooltips examples

@mixin bubble_arrow_common{
    visibility:   hidden;
    transition:   visibility 0s ease-in 0.5s;
    position:     absolute;
}

@mixin up_down_arrow_common($top,$margin-left){

    top: $top;
    margin-left:  $margin-left;
    border-right: 20px solid transparent;
    border-left:  20px  solid transparent;
}

@mixin right_left_arrow_common($margin-left){
  top:           0;
  margin-left:   $margin-left;
  border-bottom: 15px solid transparent;
  border-top:    15px solid transparent;
}

@mixin set_arrow_tooltip{
    color:   transparent;
    content: '';
    @include bubble_arrow_common();
}

@mixin set_bubble_tooltip($content,$top,$left){

  @include bubble_arrow_common();
  content:          $content;
  background-color: rgba(172,65,66,0.3);
  font-size:        20px;
  box-shadow:       0px 0px 3px;
  padding:          7px;
  border-radius:    11px;
  top:              $top;
  left:             $left;

}

@mixin show_tooltip{

    &:hover::before,
    &:hover::after {
        visibility: visible;

    }
}

SCSS ejemplo para el container


#container{

 position:relative;
 width: 350px;
 margin: 0 auto;

 .nav_bar{
   list-style: none;
     display: flex;

     li{
        margin-left: 40px;

    i{
      font-size: 34px;
      color: #ac4142
        }
     }
    }
}

SCSS ejemplo para la tooltip de arriba

Este primer ejemplo es para el icono de la casa.


#home{

  &::before{

        @include set_arrow_tooltip();
        @include up_down_arrow_common(-16px,-4px);

        border-top: 10px solid rgba(25,25,25,0.3);
    }

    &::after{

        @include set_bubble_tooltip("Home",-60px,138px);
    }

    @include show_tooltip();
}

SCSS ejemplo para la tooltip de abajo.

Este segundo ejemplo es para el icono del usuario.


#about{

  &::before{

        @include set_arrow_tooltip();
        @include up_down_arrow_common(42px,-7px);

        border-bottom: 10px solid rgba(25,25,25,0.3);
  }

  &::after{

      @include set_bubble_tooltip("About",53px,207px);
  }

  @include show_tooltip();
}

SCSS ejemplo para la tooltip de la izquierda.

Este tercer ejemplo es para el icono de las tuercas.


#settings{

    &::before{

        @include set_arrow_tooltip();
        @include right_left_arrow_common(-20px);

        border-left: 15px solid rgba(25,25,25,0.3);
  }

  &::after{

      @include set_bubble_tooltip("Settings",-7px,-26px);
    }

  @include show_tooltip();
}

SCSS ejemplo para la tooltip de la derecha.

Este cuarto ejemplo es para el icono del archivo.


#archive{

    &::before{

        @include set_arrow_tooltip();
        @include right_left_arrow_common(40px);

        border-right: 15px solid rgba(25,25,25,0.3);
  }

  &::after{

      @include set_bubble_tooltip("Archive",-7px,inherit);
      right: -82px;

  }

  @include show_tooltip();
}

Para ver el CSS compilado haz click a este link

Live demo

Todas la medidas en píxeles están ajustadas a este ejemplo por lo que si tienes pensado usarlo lo más seguro es que debas de cambiarlas.

comments powered by Disqus