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
Demo Image: Bubble Point Tooltips

Bubble Point Tooltips

Author:
Chris Coyier
Created:
JANUARY 18, 2019
Made with:
HTML, CSS and JavaScript

2) Fancy & Animated Tooltip (CSS Only)

Fancy & Animated Tooltip (CSS Only)
Demo Image: 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.

Author:
R. Schnetzinger
Created:
JANUARY 07, 2019
Made with:
HTML, CSS

3) OnHover bounce tooltip

OnHover bounce tooltip
Demo Image: OnHover bounce tooltip

OnHover bounce tooltip

Author:
Ivan Sakoman
Created:
MAY 02, 2016
Made with:
HTML, CSS

4) Information Tooltip

Information Tooltip
Demo Image: Information Tooltip

Add row and remove row with tooltip options

Author:
Maycon Luiz
Created:
FEBRUARY 18, 2019
Made with:
HTML, CSS and JavaScript

5) Accessible SVG Link List with Tooltips

Accessible SVG Link List with Tooltips
Demo Image: 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
Author:
Scott Vinkle
Created:
JULY 14, 2017
Made with:
HTML, CSS

6) Colortip – a jQuery Tooltip Plugin

Colortip - a jQuery Tooltip Plugin
Demo Image: Colortip – a jQuery Tooltip Plugin

JQuery Tooltip Plugin

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

Author:
Kushagra Gour
Created:
DECEMBER 30, 2012
Made with:
HTML, CSS

8) Show tooltip on click

Show tooltip on click
Demo Image: Show tooltip on click

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

Author:
James Mejia
Created:
JUNE 16, 2015
Made with:
HTML, CSS(SCSS) and JavaScript

9) Copy to Clipboard with Javascript and Bootstrap Tooltips

Copy to Clipboard with Javascript and Bootstrap Tooltips
Demo Image: 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

Author:
Nathan Long
Created:
OCTOBER 07, 2016
Made with:
HTML, CSS(SCSS) and JavaScript

10) Warcraft Tooltips

Warcraft Tooltips
Demo Image: Warcraft Tooltips

Warcraft Tooltips with css, handlebars and some jQuery

Author:
Simon Goellner
Created:
AUGUST 20, 2014
Made with:
HTML, CSS(SCSS) and JavaScript

11) Pure CSS Tooltips

Pure-CSS Tooltips
Demo Image: 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.

Author:
Pure-CSS.com
Created:
APRIL 30, 2015
Made with:
HTML, CSS

12) CSS ToolTip Smooth animation

CSS ToolTip Smooth animation
Demo Image: CSS ToolTip Smooth animation

Omar Dsoky Created ‘ CSS ToolTip ‘ with smooth animation

Author:
Omar Dsoky
Created:
JUNE 14, 2017
Made with:
HTML, CSS and JavaScript

13) Bootstrap html tooltips

Bootstrap html tooltips
Demo Image: Bootstrap html tooltips

Simple Bootstrap tooltips with external html content

Author:
Gilles Migliori
Created:
JANUARY 19, 2016
Made with:
HTML, CSS and JavaScript

14) Friendly Little Tooltips with Animation

Friendly Little Tooltips with Animation
Demo Image: Friendly Little Tooltips with Animation

CSS only hover tooltip animations.

Author:
Joshua Ward
Created:
MARCH 04, 2017
Made with:
HTML, CSS(SCSS)

15) Timeline with tooltips

Timeline with tooltips
Demo Image: Timeline with tooltips

Simple % based timeline with built in css tooltips

Author:
Chris Seeds
Created:
FEBRUARY 12, 2014
Made with:
HTML, CSS

16) CSS Directional Tooltips

CSS Directional Tooltips
Demo Image: CSS Directional Tooltips

CSS Directional Tooltips

Author:
Chris Bracco
Created:
OCTOBER 01, 2013
Made with:
HTML, CSS

17) Animated CSS Tooltips

Animated CSS Tooltips
Demo Image: Animated CSS Tooltips

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

Author:
runnabro
Created:
FEBRUARY 08, 2014
Made with:
HTML, CSS

18) Single Element Tooltip

Single Element Tooltip
Demo Image: 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

Author:
Zoë Bijl
Created:
OCTOBER 16, 2014
Made with:
HTML(Haml), CSS(SCSS)

19) Social Icons with Tooltip

Social Icons with Tooltip
Demo Image: Social Icons with Tooltip

Social media icons using sass mixin for styling icons and tooltip with single hex value.

Author:
Jon Milner
Created:
NOVEMBER 04, 2013
Made with:
HTML, CSS(SCSS)

20) Pure CSS Tooltips

Pure CSS Tooltips
Demo Image: Pure CSS Tooltips

Custom css tooltips without JavaScript

Author:
John Fink
Created:
NOVEMBER 29, 2016
Made with:
HTML(Pug), CSS(Scss)

21) Tooltip Pagination

Tooltip Pagination
Demo Image: Tooltip Pagination

Tooltip Pagination

Author:
Joe
Created:
DECEMBER 26, 2014
Made with:
HTML, CSS(SCSS)

22) Circular Tooltip

Circular Tooltip
Demo Image: Circular Tooltip

Hover tooltip written explicitly in HTML and CSS

Author:
Nick Silvester
Created:
MAY 01, 2013
Made with:
HTML, CSS

23) CSS Tooltip Magic

CSS Tooltip Magic
Demo Image: CSS Tooltip Magic

Animated Tooltips With CSS

Author:
Envato Tuts+
Created:
JANUARY 23, 2017
Made with:
HTML, CSS

24) Bootstrap jQuery Tooltip and Popover Plugin

Bootstrap jQuery Tooltip and Popover Plugin
Demo Image: Bootstrap jQuery Tooltip and Popover Plugin

Bootstrap jQuery Tooltip and Popover Plugin

Author:
Jason Davis
Created:
OCTOBER 05, 2014
Made with:
HTML, CSS and JavaScript

25) Adobe wordpress Tooltips

Adobe wordpress Tooltips
Demo Image: Adobe wordpress Tooltips

Adobewordpress created CSS based tooltips designs for you.

Author:
adobewordpress
Created:
OCTOBER 15, 2014
Made with:
HTML, CSS and JavaScript

26) Tooltips Using Tether-tooltips

Tooltips Using Tether-tooltips
Demo Image: Tooltips Using Tether-tooltips

Using tether-tooltips

Author:
Yoann Nouveau
Created:
OCTOBER 13, 2015
Made with:
HTML, CSS and JavaScript
W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *