w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Essentials

26 CSS Tooltips

September 25, 2019
in Essentials

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

You might also like

15 Free CSS Floating action buttons

13 Free CSS Ripple Effect Buttons

15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience

Custom radio button using CSS only

T-shirt cannon playful animated button concept

Chat bubble smoothly morphs into a “close” X

1) Bubble Point Tooltips

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

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

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

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.

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

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

21) Tooltip Pagination

Tooltip Pagination
Demo Image: Tooltip Pagination

Tooltip Pagination

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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

Tutorial/codes – Demo

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.

Tutorial/codes – Demo

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

Tutorial/codes – Demo

Author:
Yoann Nouveau
Created:
OCTOBER 13, 2015
Made with:
HTML, CSS and JavaScript
Tags: animationCSSCSS Tooltipshtmltooltips
Previous Post

49 CSS Tables

Next Post

Fixed Sidebar Navigation Menu

Related Stories

CSS Floating action buttons
Essentials

15 Free CSS Floating action buttons

March 20, 2023
Free CSS Ripple Effect Button
Essentials

13 Free CSS Ripple Effect Buttons

March 6, 2023
15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience
Essentials

15 Inspiring Button Animation Examples with Demo: Elevate Your User Experience

February 24, 2023
Pill Styled Radio ButtonsPill Styled Radio Buttons
Essentials

Custom radio button using CSS only

December 10, 2020
t-shirt cannon playful animated button concept
Essentials

T-shirt cannon playful animated button concept

October 13, 2020
chat bubble smoothly morphs into a "close" X
Essentials

Chat bubble smoothly morphs into a “close” X

October 13, 2020
Clipped Overlapping Grid Items
Essentials

Clipped Overlapping Grid Items

September 30, 2020
Exciting Multi-line Highlights
Essentials

Exciting Multi-line Highlights

September 21, 2020

Discussion about this post

Follow Us

Popular Posts

100 Creative CSS Cards

44 Free Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

49 CSS Tables

20 HTML & CSS pricing tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

55 Useful handpicked CSS Buttons with examples and demos

89 Best CSS Toggle Switches

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools