26 CSS Tooltips

Collection of Hand-picked CSS Tooltips and developed using CSS and HTML. Demos and downloads are available at each tooltips tutorials.

1) Bubble Point Tooltips

Bubble Point Tooltips

Tutorial/codes – Demo

Author:
Chris Coyier

Created:
JANUARY 18, 2019

Made with:
HTML, CSS and JavaScript

2) 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.

Tutorial/codes – Demo

Author:
R. Schnetzinger

Created:
JANUARY 07, 2019

Made with:
HTML, CSS

3) OnHover bounce tooltip

OnHover bounce tooltip

Tutorial/codes – Demo

Author:
Ivan Sakoman

Created:
MAY 02, 2016

Made with:
HTML, CSS

4) Information Tooltip

Add row and remove row with tooltip options

Tutorial/codes – Demo

Author:
Maycon Luiz

Created:
FEBRUARY 18, 2019

Made with:
HTML, CSS and JavaScript

5) Accessible SVG Link List with Tooltips

A consistent and accessible user experience across browsers/assistive technologies, this link list features:

SVG sprite
CSS tooltips
aria-hidden attribute on SVGs to hide from AT
No SVG <title> elements as they are wildly inconsistent across browsers/AT
Links are described via tooltip text for screen reader users
Tooltips are visually displayed on :hover and :focus for keyboard-only users
Browser default focus styles for keyboard-only and low-vision users
Tested with Safari/VO, Firefox/NVDA, IE/JAWS, Chrome/TalkBack

Tutorial/codes – Demo

Author:
Scott Vinkle

Created:
JULY 14, 2017

Made with:
HTML, CSS

6) Colortip – a jQuery Tooltip Plugin

JQuery Tooltip Plugin

Tutorial/codes – Demo

Author:
Yasin Aydın

Created:
JANUARY 19, 2014

Made with:
HTML, CSS and JavaScript

7) Mini tooltip library in pure CSS

Hint - a CSS tooltip library — Demo Image: Hint – a CSS tooltip library

This an attempt to make a mini tooltip library in pure CSS. Does the basic job but still has bugs and lacks some important features. Will try improving this into some usable thing. Note: Works best on Firefox (transitions on pseudo elements not supported on any other browser).

Tutorial/codes – Demo

Author:
Kushagra Gour

Created:
DECEMBER 30, 2012

Made with:
HTML, CSS

8) Show tooltip on click

A simple tooltip popup with a drop-shadow filter. A tooltip that uses CSS animations to animate in & out.

Tutorial/codes – Demo

Author:
James Mejia

Created:
JUNE 16, 2015

Made with:
HTML, CSS(SCSS) and JavaScript

9) Copy to Clipboard with Javascript and Bootstrap Tooltips

Requires: Bootstrap 3, jQuery. Wanted a simple implementation of copy to clipboard that functions like the Github button for repo paths. Uses bootstrap tooltips to show status. Events are triggered on .js-copy class

Tutorial/codes – Demo

Author:
Nathan Long

Created:
OCTOBER 07, 2016

Made with:
HTML, CSS(SCSS) and JavaScript

10) Warcraft Tooltips

Warcraft Tooltips with css, handlebars and some jQuery

Tutorial/codes – Demo

Author:
Simon Goellner

Created:
AUGUST 20, 2014

Made with:
HTML, CSS(SCSS) and JavaScript

11) 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.

Tutorial/codes – Demo

Author:
Pure-CSS.com

Created:
APRIL 30, 2015

Made with:
HTML, CSS

12) CSS ToolTip Smooth animation

Omar Dsoky Created ‘ CSS ToolTip ‘ with smooth animation

Tutorial/codes – Demo

Author:
Omar Dsoky

Created:
JUNE 14, 2017

Made with:
HTML, CSS and JavaScript

13) Bootstrap html tooltips

Simple Bootstrap tooltips with external html content

Tutorial/codes – Demo

Author:
Gilles Migliori

Created:
JANUARY 19, 2016

Made with:
HTML, CSS and JavaScript

14) Friendly Little Tooltips with Animation

CSS only hover tooltip animations.

Tutorial/codes – Demo

Author:
Joshua Ward

Created:
MARCH 04, 2017

Made with:
HTML, CSS(SCSS)

15) Timeline with tooltips

Simple % based timeline with built in css tooltips

Tutorial/codes – Demo

Author:
Chris Seeds

Created:
FEBRUARY 12, 2014

Made with:
HTML, CSS

16) CSS Directional Tooltips

CSS Directional Tooltips

Tutorial/codes – Demo

Author:
Chris Bracco

Created:
OCTOBER 01, 2013

Made with:
HTML, CSS

17) Animated CSS Tooltips

Animated tooltips with just CSS. No extra HTML, no JS.

Tutorial/codes – Demo

Author:
runnabro

Created:
FEBRUARY 08, 2014

Made with:
HTML, CSS

18) Single Element Tooltip

This is a single element tooltip that is somewhat accessible. Tooltips are activated on hover, or when they receive focus. VoiceOver does announce the content on focus, but not on hover. To make this even more accessible, we could use two element and a role-attribute of tooltip on the element that represents the tooltip. This will be link to that element with aria-describedby

Tutorial/codes – Demo

Author:
Zoë Bijl

Created:
OCTOBER 16, 2014

Made with:
HTML(Haml), CSS(SCSS)