:: after css

/* Description:
The ::after selector inserts something after the content of each 
selected element(s) (ie: after <p> tag or .addEndingText class).*/

/* Example: 
Insert some text after the content of each <p> element:*/
p::after { 
  content: " - Remember this";
}

/*NOTE: IE8 and Opera 4-6 only support the old, single-colon CSS syntax 
(:after). Newer versions support the standard, double-colon syntax 
(::after).*/

span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}