Tooltip in Full CSS

Tooltips are everywhere to give some hints to users, I think many of you already used the one from Twitter Bootstrap. Those one are really good but there is one problem, you need to use javascript to enable the tooltips so you need to load a library and even more two library with jquery. Of course there is many other library for tooltips but today we will do it without any line of javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$arrow-size: 5px;
$tooltip-color: rgba(0, 0, 0, .75);

[data-title] {
  position: relative;
  &:before, &:after {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
  }
  &:hover {
    &:before, &:after {
      opacity: 1;
    }
  }

  &:before {
    content: "";
    width: 0;
    height: 0;
    border-bottom: solid $arrow-size $tooltip-color;
    border-left: solid $arrow-size transparent;
    border-right: solid $arrow-size transparent;
    margin-left: $arrow-size / 2;
  }

  &:after {
    content: attr(data-title);
    padding: 2px 10px;
    background-color: $tooltip-color;
    margin-top: $arrow-size;
  }
}

Let’s explain a bit this code!

We look at all elements with a data-title defined as attribute [data-title] then for the after and before pseudo-elements we set there positions and there opacity when we hover on the element or no.

Now on the specific before pseudo element we will create a small arrow. Here is a small convenient trick you just set a big bottom-border for a content of size 0 and then some right and left transparent borders.

Finally, the real part of the tooltip is in the after pseudo element, you just have to define the content from the data-title attribute with content: attr(data-title) and that’s all.

See the Pen JHFCf by Anthony (@antho1404) on CodePen

Comments

Copyright © 2014 - Anthony Estebe -