Collection of HTML and CSS tooltip code examples: animated, with arrows, with hover effects and etc. Update of April 2020 collection. 4 new examples.

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About a code

Emerging Tooltip

Emerging tooltip popup example. A demo using a couple of different CSS techniques. SVG line animation, Multiple filter: drop-shadow, Material UI easing, …

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

Responsive: no

Dependencies: -

Demo image: Pure CSS 1 Element Gradient Tooltip

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS 1 Element Gradient Tooltip

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

Responsive: no

Dependencies: -

Author

  • Gemma Stiles

Made with

  • HTML / CSS

About a code

The abbr element

The HTML abbr element represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. If present, title must contain this full description and nothing else. We can use CSS to style it and make it look a little nicer. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element.

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

Responsive: yes

Dependencies: -

Author

  • Jack Domleo

Made with

  • HTML / CSS (SCSS)

About a code

Cooltipz.css - Cool Tooltips Made from Pure CSS

A pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use.

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

Responsive: yes

Dependencies: cooltipz.css

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS)

About a code

Tooltip Animation

Simple tooltip animation in HTML and CSS.

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

Responsive: no

Dependencies: -

Author

  • okawa-h

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Tooltip Only CSS

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

Responsive: yes

Dependencies: -

Author

  • Vladimir

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

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

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

Made with

  • HTML / CSS

About the code

Tooltip

Pure CSS laser line tooltip.

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

Responsive: no

Dependencies: -

Demo image: Flyout Tooltip

Author

  • Marc Wiethe

Made with

  • HTML / CSS (SCSS)

About the code

Flyout Tooltip

Simple CSS only flyout tooltip.

Demo image: Pure CSS Tooltip

Author

  • Vitalii

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Tooltip

Pure CSS tooltip with full shadow around.

Demo Image: Tooltip

Author

  • Hicham Mellouki
  • August 30, 2017

Made with

  • HTML
  • CSS

About the code

Tooltip

CSS tooltip with fade-in animation.

Demo Image: Tooltip usign just CSS

Author

  • Leandro Fialho
  • July 25, 2017

Made with

  • HTML
  • CSS

About the code

Tooltip Usign Just CSS

Simple tooltip with HTML and CSS.

Demo Image: CSS Tooltip

Author

  • Omar Dsoky
  • June 20, 2017

Made with

  • HTML
  • CSS

About the code

CSS Tooltip

CSS tooltip with smooth animation.

Demo Image: Tooltips

Author

  • elhombretecla
  • March 16, 2017

Made with

  • HTML
  • CSS/SCSS

About the code

Tooltips

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

Demo Image: Friendly Little Tooltips
Demo Image: Friendly Little Tooltips

Friendly Little Tooltips

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

Demo Image: Animated CSS Tooltip
Demo Image: Animated CSS Tooltip

Animated CSS Tooltip

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

Demo Image: Tooltiper
Demo Image: Tooltiper

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

Demo Image: Tooltips
Demo Image: Tooltips

Tooltips

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

Demo Image: Button With Tooltip
Demo Image: Button With Tooltip

Button With Tooltip

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

Demo Image: Automation Tooltips with Simple Data Attributes

Author

  • Adwin
  • August 26, 2016

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.

Demo Image: Easy Tooltips
Demo Image: Easy Tooltips

Easy Tooltips

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

Demo Image: Google Keep Tooltip Reproduction
Demo Image: Google Keep Tooltip Reproduction

Google Keep Tooltip Reproduction

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

Demo Image: Pure CSS Tooltips
Demo Image: Pure CSS Tooltips

Pure CSS Tooltips

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

Demo Image: Pure CSS Tooltip
Demo Image: Pure CSS Tooltip

Pure CSS Tooltip

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

Demo Image: Tooltip Pagination
Demo Image: Tooltip Pagination

Tooltip Pagination

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

Demo Image: Dynamic Tooltip Text With CSS
Demo Image: Dynamic Tooltip Text With CSS

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

Demo Image: Tooltip
Demo Image: Tooltip

Tooltip

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

Demo Image: Pure-CSS Tooltips

Author

  • pure-css.com
  • May 4, 2015

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.

Demo Image: CSS Only Tooltip
Demo Image: CSS Only Tooltip

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

Demo Image: CSS-Only Tooltip
Demo Image: CSS-Only Tooltip

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

Demo Image: Simple Tooltips CSS3
Demo Image: Simple Tooltips CSS3

Simple Tooltips CSS3

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

Demo Image: Tooltip
Demo Image: Tooltip

Tooltip

Nice tooltip.
Made by Ms Moneypenny
April 17, 2013