DEV Community

Cover image for Do you need a Tooltip or a Speech Bubble? I have created 100 using CSS 😲
Temani Afif
Temani Afif

Posted on

Do you need a Tooltip or a Speech Bubble? I have created 100 using CSS 😲

It's a fact: you will need a Tooltip at least once in your front-end journey so here I am with another CSS-only collection. 100 different tooltip (or speech bubble) shapes!


👉 CSS Tooltip shapes 👈


Stop searching for codes and tutorials on how to create tooltips. My collection contains all the variations you will ever need and guess what? All of them are made with a single element. No complex HTML is required, simply copy the CSS and you are done!

You will also get a code made with modern CSS and optimized with CSS variables. No magic numbers or hacks, update a few variables to adjust the shape.


What makes your collection special? There is already a ton of code on the internet to create tooltips and speech bubbles!

In addition to the simple shapes, my collection contains the ones that are difficult to create and even if you find their code on the internet, they are either made with complex code or rely on tons of hacks and magic numbers.

Not convinced, see a few examples!

Rounded Corners

You can have rounded corners while easily adjust the position of the tail using one variable. And without pseudo-elements!

Play with the following demo to control the tail position.

Gradient Coloration

Do you want a gradient coloration? Here you go!

Adding Borders

One of the difficult tasks is to add a border around the shape, right? It's no more the case!

CSS-only tooltip with border

As a bonus, you can even have a gradient coloration for both the border and background.

CSS-only tooltip with border and gradient coloration

What about a border with a gradient coloration and a transparent background? It's there too!

CSS-only tooltip with transparent background and gradient border


I let you explore the whole collection to see all the examples. Which one will you use for your next project?

You can get a unique link for each tooltip. If for example, you want the #35 then the link is: https://css-generators.com/tooltip-speech-bubble/#t35

Each shape has its own link for an easy share!


If you want to know the secret behind creating most of the shapes, I wrote a detailed article. Having a code ready to use is good but knowing the CSS tricks is better 👍



You want to support me?

buy me a coffee

OR

Become a patron

Top comments (3)

Collapse
 
sreno77 profile image
Scott Reno

Thanks for sharing!

Collapse
 
mitecnico profile image
Carmelo

Excellent tool. It saves a lot of time!

Collapse
 
hashirdev profile image
Hashir Afzal

amazing keep it up .Love from Pakistan