Collection of free Tailwind CSS tooltips from Codepen and other resources.

Demo image: Tailwind CSS Tooltip Component

Author

  • Harrishash

Made with

  • HTML / CSS / JS

About a code

Tailwind CSS Tooltip Component

A TailwindCSS tooltip is a brief, informative message that appears when a user interacts with an element. It provides additional information.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Tooltip

Author

  • ThannhNhut

Made with

  • HTML / CSS

About a code

Tooltip

Tailwind tooltip bottom.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Tooltip

Author

  • Anonymous

Made with

  • HTML / CSS

About a code

Tooltip

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.1

Demo image: Tooltip Style #1

Author

  • TailGrids

Made with

  • HTML / CSS

About a code

Tooltip Style #1

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Tooltip Style #2

Author

  • TailGrids

Made with

  • HTML / CSS

About a code

Tooltip Style #2

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Tooltip Style #3

Author

  • TailGrids

Made with

  • HTML / CSS

About a code

Tooltip Style #3

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Tailwind Tooltip Top Purple

Author

  • devdojo

Made with

  • HTML / CSS

About a code

Tailwind Tooltip Top Purple

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Tooltip by Tailwind and Alpine

Author

  • t7team

Made with

  • HTML / CSS / JS

About a code

Tooltip by Tailwind and Alpine

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

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.8.10

Demo image: Lo-fi Tailwind CSS Tooltip - Bottom Aligned

Author

  • Rob Stinson

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Tooltip - Bottom Aligned

A tooltip with a bottom aligned notice using TailwindCSS classes.

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Tooltip

Author

  • TonyCampa

Made with

  • HTML / CSS

About a code

Tooltip

Simple tooltip with multiple arrow positions.

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

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0