Search code examples
csspseudo-elementcss-shapes

How can I create custom tooltips with css pseudoelements

I am reading css-tricks and in the end I can see the following.

Using an HTML5 data attribute, then pulling that attribute in and styling it as a pseudo element, we can create completely custom tooltips through CSS.

enter image description here

The problem is that the link inside of the article is dead, and I am not such a good html/css guy to be able to understand how to do this. Can anyone help?

Solution

  • JSFiddle is here. Note: The original content is here.

    .tooltip {
  display: inline;
  position: relative;
}

.tooltip:hover {
  color: #c00;
  text-decoration: none;
}

.tooltip:hover:after {
  background: #111;
  background: rgba(0, 0, 0, .8);
  border-radius: .5em;
  bottom: 1.35em;
  color: #fff;
  content: attr(title);
  display: block;
  left: 1em;
  padding: .3em 1em;
  position: absolute;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  z-index: 98;
}

.tooltip:hover:before {
  border: solid;
  border-color: #111 transparent;
  border-color: rgba(0, 0, 0, .8) transparent;
  border-width: .4em .4em 0 .4em;
  bottom: 1em;
  content: "";
  display: block;
  left: 2em;
  position: absolute;
  z-index: 99;
}
    <p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p>