FreeFrontend

16 CSS Tooltips

March 17, 2017 | 7 Minute Read

Collection of HTML and CSS tooltips. Demo and download code (*zip).

Demo Image: Friendly Little Tooltips
Friendly Little Tooltips (demo image)

Friendly Little Tooltips

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

download demo and code
Demo Image: Animated CSS Tooltip
Animated CSS Tooltip (demo image)

Animated CSS Tooltip

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

download demo and code

See the Pen Animated CSS Tooltip by Sasha (@sashatran) on CodePen.

Demo Image: Tooltiper
Tooltiper (demo image)

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

download demo and code

See the Pen Tooltiper by Thomas Podgrodzki (@Podgro) on CodePen.

Demo Image: Tooltips
Tooltips (demo image)

Tooltips

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

download demo and code

See the Pen CSS only tooltips by Samuel Janes (@SamuelJanes) on CodePen.

Demo Image: Button With Tooltip
Button With Tooltip (demo image)

Button With Tooltip

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

download demo and code

See the Pen Button w/ tooltip by Fabrizio Cuscini (@fabriziocuscini) on CodePen.

Demo Image: Easy Tooltips
Easy Tooltips (demo image)

Easy Tooltips

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

download demo and code

See the Pen Easy Tooltips by Matheus Costa (@matheusagcosta) on CodePen.

Demo Image: Google Keep Tooltip Reproduction
Google Keep Tooltip Reproduction (demo image)

Google Keep Tooltip Reproduction

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

download demo and code

See the Pen Google Keep Tooltip Reproduction by Kyle Lavery (@koenigsegg1) on CodePen.

Demo Image: Pure CSS Tooltips
Pure CSS Tooltips (demo image)

Pure CSS Tooltips

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

download demo and code

See the Pen 012 - Tooltip by Matthias Martin (@roydigerhund) on CodePen.

Demo Image: Pure CSS Tooltip
Pure CSS Tooltip (demo image)

Pure CSS Tooltip

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

download demo and code

See the Pen Simple CSS Only Tooltip by Matt Stvartak (@mattstvartak) on CodePen.

Demo Image: Tooltip Pagination
Tooltip Pagination (demo image)

Tooltip Pagination

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

download demo and code

See the Pen Tooltip Pagination by Joe Richardson (@dope) on CodePen.

Demo Image: Dynamic Tooltip Text With CSS
Dynamic Tooltip Text With CSS (demo image)

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

download demo and code
Demo Image: Tooltip
Tooltip (demo image)

Tooltip

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

download demo and code

See the Pen Tooltip [js] by James Mejia (@mejiaj) on CodePen.

Demo Image: CSS Only Tooltip
CSS Only Tooltip (demo image)

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

download demo and code

See the Pen CSS Only Tooltip by Robert Douglas (@redouglas) on CodePen.

Demo Image: CSS-Only Tooltip
CSS-Only Tooltip (demo image)

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

download demo and code

See the Pen CSS-only Tooltip by Kristina Schneider (@Kriesse) on CodePen.

Demo Image: Simple Tooltips CSS3
Simple Tooltips CSS3 (demo image)

Simple Tooltips CSS3

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

download demo and code

See the Pen Simple Tooltips CSS3 by Firdaus Sabain (@Firdaus-Sabain) on CodePen.

Demo Image: Tooltip
Tooltip (demo image)

Tooltip

Nice tooltip.
Made by Ms Moneypenny
April 17, 2013

download demo and code

See the Pen Tooltipster is nice by Ms Moneypenny (@Moneypenny) on CodePen.