Tooltip by pure CSS

::after and ::before are very useful notation in CSS for showing content or supporting layout.

We can set some content for “content” property in css for ::after or ::before notation,  for example:

Is there any way to set dynamic content for “content”, the answer is YES.

CSS allow us to set content for “content” by using customized attribute of html element like below:

The result is as below:
csstooltip-1

that means if we can make the content of “data-tooltip” visible when mouse over and invisible when mouse out,  the basic tooltip effect comes out.

Here we use another pseudo class “:hover” to do the switching.

Next, we can focus on how to change the style of the ::after pseudo element to make it more like a tooltip box.

Below is the html and css code and it’s effect

tooltipbycss

The following two tabs change content below.
Wang Weiqiang is a senior web developer, and professional on ASP.NET, MVC, C#, Python, SQL Server, HTML5, Javascript, also interesting in machine learning and related algorithm.

Latest posts by Wang Weiqiang (王维强) (see all)

Wang Weiqiang is a senior web developer, and professional on ASP.NET, MVC, C#, Python, SQL Server, HTML5, Javascript, also interesting in machine learning and related algorithm.

Posted in CSS3 Tagged with:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Categories

Recent Posts

Related Posts