45+ CSS Tooltips - Free Code + Demos

Collection of 45+ CSS Tooltips. All items are 100% free and open-source. The list also includes animated css tooltips, and with arrows.

1. Tooltip Animation

CSS Tooltips - Tooltip animation
Simple Tooltip animation
Author: Milan Raring (milanraring)
Created on: January 16, 2020
Made with: HTML, SCSS
Tags: button, tooltip, animation, microinteraction, btn

2. Tooltip Only CSS

CSS Tooltips - Tooltip only CSS
make by only CSS
Author: okawa-h (okawa-h)
Created on: September 4, 2019
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: css, tooltip, tips, component, html

3. Adaptive Tooltips

CSS Tooltips - Adaptive Tooltips
Author: Vladimir (fdsea)
Created on: February 13, 2019
Made with: HTML, Sass

4. Fancy Y Animated Tooltip CSS Only

CSS Tooltips - Fancy Y 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...
Read More
Author: Reinhard Schnetzinger (reiinii1)
Created on: January 7, 2019
Made with: HTML, CSS
Tags: tooltip, css, animated, css3, material

5. Playful Little Tooltip Ideas

CSS Tooltips - Playful Little Tooltip Ideas
Author: Andrej Sharapov (andrejsharapov)
Created on: December 26, 2018
Made with: HTML, SCSS

6. ToolTip [Laser Line Effect]

CSS Tooltips - ToolTip [Laser Line Effect]
Author: raj (raj-codepen)
Created on: December 25, 2018
Made with: HTML, CSS, JS

7. Flyout Tooltip

CSS Tooltips - Flyout Tooltip
Simple CSS only flyout tooltip
Author: Marc Wiethe (marcwiethe)
Created on: February 15, 2018
Made with: HTML, SCSS
Tags: tooltip, cssonly, flyout

8. Pure Css Tooltip With Full Shadow Around

CSS Tooltips - Pure css tooltip with full shadow around
Author: Vitalii (nevadskiy)
Created on: December 22, 2017
Made with: HTML, SCSS

9. Tooltip

CSS Tooltips - Tooltip
Author: hixann (hixann)
Created on: August 30, 2017
Made with: HTML, CSS

10. Tooltip Usign Just CSS + First Letter CSS Propriety

CSS Tooltips - Tooltip usign just CSS +  First letter CSS propriety
Author: Leandro Fialho (lefialho)
Created on: July 25, 2017
Made with: HTML, CSS

11. Pure Css Tooltip With Full Shadow Around

CSS Tooltips - Pure css tooltip with full shadow around
Author: Vitalii (nevadskiy)
Created on: December 22, 2017
Made with: HTML, SCSS

12. Tooltips

CSS Tooltips - Tooltips
Author: elhombretecla (elhombretecla)
Created on: March 16, 2017
Made with: HTML, SCSS

13. Automation Tooltips With Simple Data Attributes

CSS Tooltips - 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.
Author: Adwin (adwin)
Created on: May 20, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: tooltips, tooltip, selector, automation, auto

14. Pure-CSS Tooltips

CSS Tooltips - 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 (pure-css)
Created on: April 30, 2015
Made with: HTML, CSS, JS
Tags: pure-css, no-js, tooltips, javascript, css

15. Friendly Little Tooltips + [Animation]

CSS Tooltips - Friendly Little Tooltips + [Animation]
CSS only hover tooltip animations.
Author: Joshua Ward (joshua_ward)
Created on: March 3, 2017
Made with: HTML, SCSS

16. Animated CSS Tooltip Concept

CSS Tooltips - Animated CSS Tooltip Concept
Author: Sasha (sashatran)
Created on: February 17, 2017
Made with: HTML, SCSS

17. Tooltiper

CSS Tooltips - Tooltiper
Author: Thomas Podgrodzki (Podgro)
Created on: January 12, 2017
Made with: HTML, CSS, JS

18. CSS Only Tooltips

CSS Tooltips - CSS only tooltips
Author: Samuel Janes (SamuelJanes)
Created on: November 27, 2016
Made with: HTML, Sass

19. Button W/ Tooltip

CSS Tooltips - Button w/ tooltip
Author: Fabrizio Cuscini (fabriziocuscini)
Created on: September 1, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

20. Easy Tooltips

CSS Tooltips - Easy Tooltips
Bourbon + Sass
Author: Matheus Costa (matheusagcosta)
Created on: September 12, 2015
Made with: HTML, SCSS
Tags: tooltip, scss, pure-css

21. Google Keep Tooltip Reproduction

CSS Tooltips - Google Keep Tooltip Reproduction
Tooltips with a circular reveal. Based on the Google Keep tooltips
Author: Kyle Lavery (koenigsegg1)
Created on: March 1, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: material design, google, tooltip, jquery

22. 012 - Tooltip

CSS Tooltips - 012 - Tooltip
This pen is part of my 100 Days CSS Challenge, view all pens under http://100dayscss.com
Author: Matthias Martin (roydigerhund)
Created on: February 17, 2016
Made with: HTML, SCSS
Tags: tooltip, link, animated

23. Simple CSS Only Tooltip

CSS Tooltips - Simple CSS Only Tooltip
Author: Matt Stvartak (mattstvartak)
Created on: February 3, 2016
Made with: HTML, SCSS

24. Tooltip Pagination

CSS Tooltips - Tooltip Pagination
Author: Joe (dope)
Created on: December 26, 2014
Made with: HTML, SCSS

25. Write JavaScript-less, Dynamic Tooltip Text With CSS

CSS Tooltips - Write JavaScript-less, 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. *Caveats: A user has to click out of button focus state for text to change back. Web-only.
Author: Julie Horvath (nrrrdcore)
Created on: July 2, 2015
Made with: HTML, SCSS
Tags: tooltip, pseudo-classes, button states

26. Tooltip [js]

CSS Tooltips - Tooltip [js]
A simple tooltip popup with a drop-shadow filter.
Author: James Mejia (mejiaj)
Created on: June 16, 2015
Made with: HTML, SCSS, JS
Tags: tooltip, animation, js, filter

27. CSS Only Tooltip

CSS Tooltips - 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 (ie: no 'smart' position based on viewport)
Author: Robert Douglas (redouglas)
Created on: November 19, 2014
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: CoffeeScript
HTML Pre-processor: Pug
Tags: css, tooltip, content, ui, animation

28. CSS-only Tooltip

CSS Tooltips - CSS-only Tooltip
Simple tooltip that makes use of a data-* attribute and pseudo elements to show text on hover.
Author: Kristina Schneider (Kriesse)
Created on: March 4, 2014
Made with: HTML, SCSS
Tags: data-attribute, tooltip, css, hover, pseudo-element

29. Simple Tooltips CSS3

CSS Tooltips - Simple Tooltips CSS3
Very simple tooltips using CSS3 component.
Author: Firdaus Sabain (Firdaus-Sabain)
Created on: December 26, 2013
Made with: HTML, CSS, JS
Tags: tooltips, css3, tooltip, compoent

30. Tooltipster Is Nice

CSS Tooltips - Tooltipster is nice
Tooltipster is here
Author: Ms Moneypenny (Moneypenny)
Created on: April 16, 2013
Made with: HTML, CSS, JS
Tags: tooltips

31. CSS Tooltip

CSS Tooltips - CSS tooltip
CSS only, using content: attr(title);
Author: Mana (manabox)
Created on: March 16, 2015
Made with: HTML, CSS
Tags: css, tooltip

32. Pure CSS Tooltip

CSS Tooltips - Pure CSS tooltip
Original: http://viget.com/inspire/css-pointer-events-and-a-pure-css3-animating-tooltip
Author: Rude (rudeayelo)
Created on: August 30, 2012
Made with: HTML, CSS
Tags: tip, tooltip, css

33. Super Simple CSS Tooltips

CSS Tooltips - Super Simple CSS Tooltips
Author: Ben Mildren (mildrenben)
Created on: April 20, 2015
Made with: HTML, SCSS
Tags: material design

34. Simple CSS Tooltip

CSS Tooltips - simple CSS tooltip
data-tooltip="I'm in top" content: attr(data-tooltip);
Author: design8383 (design8383)
Created on: December 27, 2013
Made with: HTML, CSS
Tags: tooltip

35. Pure CSS Tooltips

CSS Tooltips - Pure CSS Tooltips
A lot of web sites use JavaScript to create tooltip but is actually easier doing that with CSS.
Author: Drew (dgdav)
Created on: January 15, 2017
Made with: HTML, SCSS, JS
Tags: tooltip, css-tooltip, pseudo-element, nojs, hover content

36. Tooltip CSS Only

CSS Tooltips - Tooltip CSS Only
tooltip for any detail products
Author: Akhbar (akhbar)
Created on: July 29, 2013
Made with: HTML, CSS
Tags: css, tooltip

37. Cool CSS Hover Tooltips

CSS Tooltips - Cool CSS hover tooltips
Example how to easily create stylish tooltips with nothing but css. Main post can be found here https://fabriceleven.com/dev/hover-tooltips-with-animations/
Author: Alex (fabriceleven)
Created on: October 13, 2015
Made with: HTML, CSS
Tags: css, hover, tooltips

38. CSS Hover Tooltip Panel

CSS Tooltips - CSS Hover Tooltip Panel
Author: Dominic Eden (dominiceden)
Made with: HTML, CSS

39. Simple CSS-only Tooltip

CSS Tooltips - Simple CSS-only tooltip
Author: Bryan Robinson (brob)
Created on: August 5, 2017
Made with: HTML, SCSS

40. Toooltips 🛠

CSS Tooltips - Toooltips 🛠
Author: Gemma Stiles (GemmaStiles)
Created on: July 3, 2020
Made with: HTML, SCSS
Tags: tooltip, tooltips, css-html-tooltips