Hit enter after type your search item

CSS based tooltips over social icons: Code and live demo

Creating CSS based tooltips

In today’s world websites, showing social icons for sharing the content is common. How about adding some effects by way of tooltips as the visitors hover over any icon of social networks like Facebook, Twitter, linkedIn etc.

In this post, I am going to share such tooltips effect by using pure CSS.

A demo of CSS tooltip for social icons

In the demo, the icons of Facebook, Twitter, Google plus, Pinterest, Instagram, and Snapchat are created by using SVG tag of HTML 5. As you bring the mouse over any icon, the tooltips with respective brand color appears with the social network name, have a look:

CSS tooltips

See online demo and code

The CSS:


The markup:


Get the complete code from the demo page.


Credit: nxworld

This div height required for enabling the sticky sidebar