How can I create custom tooltips with css pseudoelements

Question

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 ps

Answer 1

You can achieve this by using the HTML5 data attributes, a couple of pseudo-elements and a bit of positioning like below:

a {
  position: relative;  /* to position the tooltip relative to the anchor tag */
}
a:hover {  /* for achieving the arrow shape at the bottom of the tooltip */
  text-decoration: none;
}
a::after,
a::before {
  position: absolute;
  display: none;  /* initially hide it from view */
}
a::before {
  content: '';
  top: -2px;
  left: 6px;
  height: 0px;
  width: 0px;
  /* the arrow */
  border-left: 5px solid transparent;
  border-top: 5px solid #ffe4b5;
  border-right: 5px solid transparent;
}
a::after {
  content: attr(data-tooltip);  /* set content of pseudo element as the value of data-tooltip attribute */
  top: -25px;
  left: -5px;
  background: #ffe4b5;
  border-radius: 4px;  /* just a bit of extra styling */
  padding: 2px 6px;
  white-space: nowrap;
  color: black;
}
a:hover::after,
a:hover::before {
  display: block;  /* display both tooltip and arrow mark when a is hovered on */
}

/* Just for demo */

* {
  font-family: Calibri;
}
.wrapper {
  margin: 25px;
}

Some long long text blah blah with some link inside it.
  
Some more text blah blah with some link inside it

You can also use the title attribute for the tooltip content. That will make fallback easy in older browsers also. Also, I have used some generic selectors, you can make it more specific.

---

Advanced Sample: Below is a more advanced version of the tool-tip with borders and transition effects achieved using CSS3 properties.

a {
  position: relative;
}
a:hover {
  text-decoration: none;
}
a::after,
a::before {
  position: absolute;
  visibility: hidden;
  background: #ffe4b5;
  border: 1px solid #f3b445;
  opacity: 0;
  transition: all 0.4s ease-out;
}
a:hover::after,
a:hover::before {
  visibility: visible;
  opacity: 1;
}
a::before {
  content: '';
  top: -3px;
  left: 6px;
  height: 4px;
  width: 4px;
  border-color: transparent #f3b445 #f3b445 transparent;
  transform: rotate(45deg);
  z-index: 2;
}
a::after {
  content: attr(data-tooltip);
  top: -25px;
  left: -5px;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  color: black;
}
/* Just for demo */

* {
  font-family: Calibri;
}
.wrapper {
  margin: 25px;
}

Some long long text blah blah with some link inside it.
  
Some more text blah blah with some link inside it

Points to note:

1. Transitions on pseudo elements is well supported in Firefox but doesn't work on Chrome v24 (and less). For the browsers that don't support it, there would be no transition effect.
2. The sample with a border to the tool-tip uses CSS3 transforms for the arrow and hence would need a CSS3 compatible browser to work properly.