10 CSS Tooltips

September 01, 2019 No comments CSS Code Examples Tooltips HTML CSS

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.


Friendly little tooltips with animation
Demo Image: Tooltiper
Friendly little tooltips with animation.
Made by Joshua Ward on March 04, 2017
demo and code

Pure CSS Tooltips

Pure CSS tooltips
Demo Image: Pure CSS Tooltips
Custom css tooltips without JavaScript.
Made by John Fink on November 29, 2016
demo and code

Info Button Like Tooltip

Info button tooltip
Demo Image: Info Button Like Tooltip
CSS only info tooltip using focus state to toggle visibility of the button.
Made by Mark Thomes on January 10, 2017
demo and code

Tooltip with CSS animations

Tooltip with css animations
Demo Image: Tooltip with CSS animations
A simple tooltip popup with a drop-shadow filter.
Made by James Mejia on June 16, 2015
demo and code

Tooltiper by data attribute

Tooltiper with 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.
Made by Thomas Podgrodzki on October 23, 2017
demo and code

Adaptive Tooltips

Adaptive tooltips
Demo Image: Adaptive Tooltips
Made by Vladimir on February 13, 2019
demo and code

Fancy And Animated Tooltip (CSS Only)

Fancy and animated tooltip css only
Demo Image: Fancy & Animated Tooltip (CSS Only)
Made by R. Schnetzinger on January 07, 2019
demo and code

Pure css tooltip with full shadow around

Pure css toolip with full shadow around
Demo Image: Pure css tooltip with full shadow around
Made by Vitalii on December 22, 2017
demo and code


Social tooltips
Demo Image: Tooltip
Made by hixann on August 30, 2017
demo and code

CSS ToolTip Smooth animation

Css tooltip smooth animation
Demo Image: CSS ToolTip Smooth animation
Made by Omar Dsoky on June 14, 2017
demo and code
{{ message }}

{{ 'Comments are closed.' | trans }}