Is it possible to make a tooltip with pure CSS?

Navigation
72

Is it possible to make a tooltip with pure CSS? That is, without jQuery, without Javascript, but only with CSS.

For example, I want to do this based on the following element: 

<a href="#" data-tooltip="Meu texto aqui" >LINK</a>
    
asked by anonymous 04.12.2015 / 13:00

4 answers

60

I will contribute ... 

body {
  margin: 30px;
}
a.tooltip {
  text-decoration: none;
  color: #000;
  font-family: "Roboto";
  font-size: 16px;
  transition: all 0.4s ease;
  -webkit-transition: all .4s ease;
  padding: 5px;
  background-color: #FFF;
  position: relative;
}
a.tooltip:before {
  content: attr(data-title);
  background-color: #000;
  color: #FFF;
  font-size: 13px;
  padding: 10px;
  box-sizing: border-box;
  font-family: "Roboto";
  position: absolute;
  left: 0;
  bottom: -50px;
  width: 250px;
  opacity: 0;
  transition: all .4s ease;
}
a.tooltip:after {
  content: "";
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  left: 5px;
  bottom: -16px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #000 transparent;
  transition: all .4s ease;
}
a.tooltip:hover:after,
a.tooltip:hover:before {
  opacity: 1;
}
<a href="#" class="tooltip" data-title="Olá, Mundo. Tudo Bem Com Vocês ?"> Teste de Link </a>
    
04.12.2015 / 13:26
48

There is another way to do this, where you have the element that will receive tooltip and another one to "be" tooltip . It would basically be like this: 

/*Desconsidere essa parte, é apenas para o snippets do SOpt*/
div {
  position: absolute;
    left: 20%;
  }
/*Desconsidere essa parte, é apenas para o snippets do SOpt*/

div.tooltips {
  position: relative;
  display: inline;
  cursor: pointer;
}
div.tooltips span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: #178BFF;
  height: 49px;
  line-height: 49px;
  text-align: center;
  visibility: hidden;
  border-radius: 17px;
}
div.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-bottom: 8px solid #178BFF;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
div:hover.tooltips span {
  visibility: visible;
  opacity: 0.9;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}
<div class="tooltips" href="#">Estou aqui!
  <span>Alá, sou diferente...</span>
</div>

For information purposes only online tooltip generators .

    
04.12.2015 / 13:24
38

Yes, it is possible!

We can use the :after attribute for this, see: 

.wm-tooltip{
    position:relative;
}

.wm-tooltip:after
{
    background-color:rgba(0, 0, 0, .6);
    color: white;
    box-sizing:border-box;
    content: attr(data-tooltip);
    display:none;
    padding:5px;
    position:absolute;
    right: -105px;
    bottom: -55px;
    z-index:3;
    box-shadow: 0 0 3px #000;
    border-radius: 0px 10px 10px 10px;
}

.wm-tooltip:hover:after {
    display:block;
}
<div style="padding:10px">
<a href="#" class="wm-tooltip" data-tooltip="Exibe o texto aí prá nós!">Testando</a>
</div>

The most important points here are:

  • :after with display:none

  • :hover:after with display:block . The :after being after the :hover indicates that after the hover of the element the display:block of the after will become active.

  • content: attr(data-tooltip) This is where the magic that transforms date text into tooltip text occurs.

04.12.2015 / 13:00
20

My idea is to use the data-tooltip attribute itself as a selector, and allow it to be used in any type of tag: 

[data-tooltip] {
  position: relative;
  cursor: pointer;
}
[data-tooltip]:before {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: 20px;
  width: 250px;
  z-index: 100;
  padding: 10px;
  text-decoration: none;
  font: 14px normal;
  border: 1px solid red;
  background: white;
  color: black;
  border-radius: 5px;
  box-shadow: 3px 3px 10px grey;
}
[data-tooltip]:hover:before {
  display: inline-block;
}
<a href="#" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Lorem ipsum.</a>
<br><br>
<div data-tooltip="Lorem ipsum dolor sit amet">Lorem ipsum.</div>
<br>
<span data-tooltip="Lorem ipsum dolor sit amet">Lorem ipsum.</span>
    
26.10.2016 / 17:16
What is Vanilla JS? Difference between single and double quotation marks in PHP