Do you need a Tooltip or a Speech Bubble? I have created 100 using CSS 😲
Tags: css, html, webdev, showdev
Published: 2024-03-04 14:20:36

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!

----

## <center> 👉 [CSS Tooltip shapes](https://css-generators.com/tooltip-speech-bubble/) 👈 </center>

----

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.

{% codepen https://codepen.io/t_afif/pen/ZEPoJpG %}


### Gradient Coloration

Do you want a gradient coloration? Here you go!

{% codepen https://codepen.io/t_afif/pen/ZEPoayw %}

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmb7eoe333id3f3bfvfh.png)

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

![CSS-only tooltip with border and gradient coloration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jlxvdddxemw4nj4l9gh.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzg2qswsinq27wf7ozgp.png)



----

I let you explore [the whole collection](https://css-generators.com/tooltip-speech-bubble/) 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](https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/). Having a code ready to use is good but knowing the CSS tricks is better 👍

----

{% link https://dev.to/afif/i-made-100-css-loaders-for-your-next-project-4eje %}

{% link https://dev.to/afif/100-underline-overlay-animation-the-ultimate-css-collection-4p40 %}

{% link https://dev.to/afif/i-created-100-unique-css-patterns-the-best-collection-31cl %}

{% link https://dev.to/afif/i-have-made-100-css-only-ribbon-shapes-the-perfect-collection-4374 %}

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

### <center>OR</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)