Tooltip -

One of my design challenges this week was to create a tooltip. I did not create many tooltips in my design career, so it was something new and challenging. I created my design challenge in Figma. Lately, I’ve been working mostly in Figma, and this software somehow became my favorite and easiest one to use.

I always share my design challenges on Dribble, but in order to do that I always have to make sure when I’m creating an artboard in Figma, the size should be one of the following: 400x300, 800x600, or 1600x1200. Otherwise, when I export my project, Dribbble won’t let it be updated unless it the right size.

I started my mini-project by creating an 800x600 artboard in Figma. I choose yellowish background color, with the hex #FFE37C. My next step was to create a rectangle where I’m going to place my icons. I created a rectangle with radius corners and I made sure it is centered. The next thing I did was to find some icons I’m going to place in my rectangle. I downloaded the Figma plugin called Icons8 Free Icons and I can say that this plugin makes your life easier. :) I choose 3 icons and place them into my rectangle, and made sure they are centered. The component I created was for mobile bottom navigation whit home, profile, and search icons. I decided I want to make a tooltip for the search icon, so I created a small rectangle with rounded corners and added the triangle with smooth corners as well, to stay consistent, and group them together. The triangle was pointing to the search icon. The last thing I did was to add a text in that rectangle that said “Quick search”. The user would hover on the search icon, and that tooltip would appear above.

Lastly, here are the results.