28 CSS Tooltips

Collection of HTML and CSS tooltips: pure css, animated and etc. Update of June 2018 collection. 4 new examples.

Author

• Vladimir
• February 13, 2019

Links

• demo and code

Made with

• HTML / CSS (Sass)

About the code

Adaptive Tooltips

HTML and CSS adaptive tooltips.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

• R. Schnetzinger
• January 7, 2019

Links

• demo and code

Made with

• HTML / CSS

About the code

Fancy & Animated Tooltip - CSS Only

Simply a tooltip with a shiny/modern opening animation. Easy-to-use: only the custom attribute data-tooltip has to be added to the respective element. Elements that can't contain other elements, such as input, can't use the tooltip. A simple solution would be to wrap the element in a div and then attach the tooltip to the div.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

• Andrej Sharapov
• December 26, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Tooltip Idea

Playful little tooltip ideas.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

• raj
• December 25, 2018

Links

• demo and code

Made with

• HTML / CSS

About the code

Tooltip

Pure CSS laser line tooltip.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

• Marc Wiethe
• February 15, 2018

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Flyout Tooltip

Simple CSS only flyout tooltip.

Author

• Vitalii
• December 22, 2017

Links

• demo and code

Made with

• HTML / CSS (SCSS)

About the code

Pure CSS Tooltip

Pure CSS tooltip with full shadow around.

Author

• Hicham Mellouki
• August 30, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Tooltip

CSS tooltip with fade-in animation.

Author

• Leandro Fialho
• July 25, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

Tooltip Usign Just CSS

Simple tooltip with HTML and CSS.

Author

• Omar Dsoky
• June 20, 2017

Links

• demo and code

Made with

• HTML
• CSS

About the code

CSS Tooltip

CSS tooltip with smooth animation.

Author

• elhombretecla
• March 16, 2017

Links

• demo and code

Made with

• HTML
• CSS/SCSS

About the code

Tooltips

Nice top, bottom, left and right tooltips with pure CSS.

Friendly Little Tooltips

Friendly little tooltips with animation.
Made by Joshua Ward
March 7, 2017

Animated CSS Tooltip

Animated HTML and CSS tooltip.
Made by Sasha
March 1, 2017

Tooltiper

This is a tooltiper. It works with data attribute. Just wrap your element in any html element width tooltiper class and add your content inside a data-tooltip attribute.
Made by Thomas Podgrodzki
February 4, 2017

Tooltips

CSS only tooltips.
Made by Samuel Janes
November 27, 2016

Button With Tooltip

HTML and CSS button with tooltip.
Made by Fabrizio Cuscini
September 1, 2016

Author

• Adwin
• August 26, 2016

Links

• demo and code

Made with

• HTML/Pug
• CSS/SCSS
• JavaScript

About the code

Automation Tooltips With Simple Data Attributes

You don't need to put every single tooltips tag to your markup, you just need to put "data-tooltips" for the message and "data-position" for positioning the tooltips to the element that you want to highlights.

Easy Tooltips

Easy tooltips with Sass.
Made by Matheus Costa
March 15, 2016

Google Keep Tooltip Reproduction

Tooltips with a circular reveal. Based on the Google Keep tooltips.
Made by Kyle Lavery
March 5, 2016

Pure CSS Tooltips

HTML and CSS tooltips.
Made by Matthias Martin
February 17, 2016

Pure CSS Tooltip

Simple CSS only tooltip.
Made by Matt Stvartak
February 3, 2016

Tooltip Pagination

Just experimenting :)
Made by Joe Richardson
July 24, 2015

Dynamic Tooltip Text With CSS

Pass in tooltip text with pseudo classes and the content:“; CSS property. The text changes will transition with the button state.
Made by Julie Horvath
July 6, 2015

Tooltip

A simple tooltip popup with a drop-shadow filter.
Made by James Mejia
June 16, 2015

Author

• pure-css.com
• May 4, 2015

Links

• demo and code

Made with

• HTML
• CSS

About the code

Pure-CSS Tooltips

Classic tooltips handled by HTML and CSS alone. Using data- attribute to store our tip message and pseudo-elements to display that message.

CSS Only Tooltip

A basic example of a pure CSS tooltip. The content is loaded from a data attribute on the anchor tag itself. Good if you need a simple solution for tooltips.
Made by Robert Douglas
November 19, 2014

CSS-Only Tooltip

Simple tooltip that makes use of a data-* attribute and pseudo elements to show text on hover.
Made by Kristina Schneider
March 4, 2014

Simple Tooltips CSS3

Very simple tooltips using CSS3 component.
Made by Firdaus Sabain
December 30, 2013

Tooltip

Nice tooltip.
Made by Ms Moneypenny
April 17, 2013