Is it possible to make a tooltip with pure CSS?

Asked

Viewed 6,695 times

79

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>
css css3

4 answers

65


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>

52

There is another way to do this, where you have the element that will receive the tooltip and another to "be" the tooltip. It would be basically 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 knowledge purposes only, there is tooltip generators online.

  • 2

    You’re a genius! + 1. The only thing I would do is use a class instead of the span. Your tooltip beat mine ;)

  • 1

    Cool, and thus support older browsers (although it is difficult for someone to use them) +1

  • @Wallacemaxters Putting as span I limit it to the element, but by classifying it, one might want to put in "anything," and there could be problems. But I don’t think mine is any better than yours. That’s a very "simplistic".

  • @Guilhermenascimento Yes, I agree with you, and I really find it difficult to use with the tools we have today (I myself do not use).

  • We have to agree that it’s faster than using javascript. And lately I’m preferring to do it with pure CSS than with jQuery (animates for example)

  • @Wallacemaxters In this I have to agree with you. But everything depends on "what" is your need. Sometimes that difference "doesn’t matter", sometimes it’s of great importance.

  • Actually I was referring to old browsers, although in question of some mobiles your code is the most indicated :)

  • Just a comment @Wallacemaxters the example with span is just an example of understanding, you can exchange for classse, id, attributes, etc. But in practice we can say that it is only really for the understanding of the effect ;)

  • @Guilhermenascimento Yes, I had forgotten mobile. I changed the answer to not use a link but any text.

  • Very good these effects with border transparent to make the balloons or arrows !

  • Most important detail and that’s why I said the answer is better: You two put the arrow in the tooltip

Show 6 more comments

41

Yes, it is possible!

We can use the attribute :after 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 standing after the :hover indicates that after the element’s Hover display:block do after will become active.

  • content: attr(data-tooltip) here is where the magic takes place that transforms the date text into the tooltip text.

  • 3

    Remembering that it would be nice to use fallback on content, chance forget to put the attribute, something like that: content: attr(data-tooltip) "Não foi definido o atributo"

  • 1

    @Guilhermenascimento, Edition authorized with success ;)

  • I think you could edit it yourself, but thanks for letting me collaborate :)

  • But because the pattern appears together ?

  • @Taopaipai Seriously, I didn’t notice, I followed the Mozilla documentation, I’ll do the rollback and then edit again.

  • Forgive me I removed the fallback because it is experimental, it seems that most of the Features that accompany the content: are experimental. The correct use is (should be) attr( attribute-name <type-or-unit>? [, <fallback> ]? ), but it doesn’t seem to be supported yet. @Taopaipai

Show 1 more comment

20

My idea is to use the data-tooltip attribute itself as a selector, and allow use 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>

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.