10 CSS Tooltips

Tooltips are a short message which appears when a cursor is positioned over an icon, link, image or any other HTML element of GUI. In this collection, we showcase the best free HTML and CSS tooltips which you can easily integrate with your website.

Tooltiper

Demo Image: Tooltiper

Friendly little tooltips with animation.

demo and code

Pure CSS Tooltips

Demo Image: Pure CSS Tooltips

Custom css tooltips without JavaScript.

demo and code

Info Button Like Tooltip

Demo Image: Info Button Like Tooltip

CSS only info tooltip using focus state to toggle visibility of the button.

demo and code

Tooltip with CSS animations

Demo Image: Tooltip with CSS animations

A simple tooltip popup with a drop-shadow filter.

demo and code

Tooltiper by data attribute

Demo Image: Tooltiper by data attribute

This is a tooltiper. It works with data attribute. Just wrap your element in any html element with tooltiper class and add your content inside a data-tooltip attribute.

demo and code

Adaptive Tooltips

Demo Image: Adaptive Tooltips

demo and code

Fancy And Animated Tooltip (CSS Only)

Demo Image: Fancy & Animated Tooltip (CSS Only)

demo and code

Pure css tooltip with full shadow around

Demo Image: Pure css tooltip with full shadow around

demo and code

Tooltip

Demo Image: Tooltip

demo and code

CSS ToolTip Smooth animation

Demo Image: CSS ToolTip Smooth animation

demo and code