Thread by @Prathkum

A tooltip is used to specify the extra bit of infomation typically when user moves the mouse over it

Tooltips guide your visitors to take action and hence provides extra layer of guidance without any difficulties

Let's see how we can create this 🧵👇🏻

We just need to create an element that we will be visible only when user moves the mouse pointer over an elment

Let's start with the HTML structure

📌 Popup text

- Add some width and padding

- Hide the popup element throughout and show it only on hover

- Place it above the element

- Add little transition for smooth rendering

📌 Create Arrow

- Creating a triangle
- Place it at the center

Check out this thread to learn how to create basic shapes using CSS

https://twitter.com/Prathkum/status/1351109176945213445?s=20

Great so far! Now we just need to show the popup text when mouse over an element

That's pretty much it for🤩 Thanks for reading this😉

I have create a pen for you.
codepen.io/prathamkumar/p…