Pure CSS to implement tooltip content cue information effect

ToolTip is the content of the information, reasonable use can give users a better experience.

There are many ways to implement, there are a lot of JS plug-ins, I am here to introduce the method of pure CSS implementation, compatibility is more reliable, ie8+ can be normal display. The implementation method is also very simple.

HTML structure

<a class= "Css-tooltip" href=" http://fatesinger.com/73887  "data-tooltip< Span class= "token punctuation" >= "137 likes with 3.43k Reads" >wordpress Theme pivot </a>   

You can see the key has 2 points, consciousness has a css-tooltip label, and the second is to data-tooltip save the hint information.

CSS Code

. css-tooltip{Position: Relative}. css-tooltip: After{Background-color:RGBA (0,0,0,0.8);Border-radius: 3px;Bottom: 30px;Color: #fff;Content:attr (Data-tooltip);Display: None;Font-size: 12px;Left: 50%;Line-height: 1.3;Padding: 5px;Position: Absolute;Text-align: Center;Width: 160px;Margin-left: -85px}. css-tooltip: Before{Content:"";Border: 4px Transparent Solid;Border-top-color:RGBA (0,0,0,0.8);Position: Absolute;bottom:22px;left:50%;display:none;margin-left:-4px} .css-tooltip:hover< Span class= "token pseudo-element" >:after,.css-tooltip : Hover:before{ Display:block}      

Ps

• You can also use .xxxx[data-tooltip] this selector.
• Try not title to use with the label at the same time, it will be more unattractive.

Pure CSS to implement tooltip content cue information effect