Collection of HTML and CSS tooltip code examples: animated, with arrows, with hover effects and etc. Update of April 2020 collection. 4 new examples.
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS 1 Element Gradient Tooltip
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
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
Links
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: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
About a code
Tooltip Only CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
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
Links
Made with
- HTML / CSS
About the code
Tooltip
Pure CSS laser line tooltip.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Flyout Tooltip
Simple CSS only flyout tooltip.
Links
Made with
- HTML / CSS (SCSS)
About the code
Pure CSS Tooltip
Pure CSS tooltip with full shadow around.
Links
Made with
- HTML
- CSS
About the code
Tooltip
CSS tooltip with fade-in animation.
Links
Made with
- HTML
- CSS
About the code
Tooltip Usign Just CSS
Simple tooltip with HTML and CSS.
Links
Made with
- HTML
- CSS
About the code
CSS Tooltip
CSS tooltip with smooth animation.
Links
Made with
- HTML
- CSS/SCSS
About the code
Tooltips
Nice top, bottom, left and right tooltips with pure CSS.
Friendly Little Tooltips
Friendly little tooltips with animation.
Made by Joshua Ward
March 7, 2017
Animated CSS Tooltip
Animated HTML and CSS tooltip.
Made by Sasha
March 1, 2017
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
Tooltips
CSS only tooltips.
Made by Samuel Janes
November 27, 2016
Button With Tooltip
HTML and CSS button with tooltip.
Made by Fabrizio Cuscini
September 1, 2016
Links
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.
Easy Tooltips
Easy tooltips with Sass.
Made by Matheus Costa
March 15, 2016
Google Keep Tooltip Reproduction
Tooltips with a circular reveal. Based on the Google Keep tooltips.
Made by Kyle Lavery
March 5, 2016
Pure CSS Tooltips
HTML and CSS tooltips.
Made by Matthias Martin
February 17, 2016
Pure CSS Tooltip
Simple CSS only tooltip.
Made by Matt Stvartak
February 3, 2016
Tooltip Pagination
Just experimenting :)
Made by Joe Richardson
July 24, 2015
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
Tooltip
A simple tooltip popup with a drop-shadow filter.
Made by James Mejia
June 16, 2015
Links
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.
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
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
Simple Tooltips CSS3
Very simple tooltips using CSS3 component.
Made by Firdaus Sabain
December 30, 2013
Tooltip
Nice tooltip.
Made by Ms Moneypenny
April 17, 2013