Create a tooltip component set – Figma Learn - Help Center

Project overview

Product: Figma Design
Topics: Auto layout, components, variants
Difficulty: Intermediate
Length: 20 minutes

In this project, we’re going to design a customizable tooltip component set. Tooltips are brief, informative messages that appear when a user interacts with the object they are attached to, such as icons, text links, or buttons. They’re useful when you want to provide extra information about the paired object.

Once you’ve completed this project, you’ll have a tooltip component set that covers the four major positions (top, right, bottom, left), as well as the eight minor positions, such as top-right and bottom-left. The tooltip will also grow or shrink in size depending on the length of content inside. Your final component set will have 12 variants and will look similar to the following:

Final tooltip set.png

Create the main tooltip component

To kick things off, we’ll create the main tooltip component. This component will consist of three layers:

A text layer that will contain the tooltip’s content
A triangle that will serve as the tooltip’s arrow
A frame that will contain the arrow and text layers

Create the text layer

Select the Text tool in the toolbar, click on the canvas, and type “Tooltip”.
Select the text layer and change the font size to 13in the Typography section of the right sidebar. We’re using the default Inter font for this tutorial but feel free to pick something else.
In the Fill section, change the font color to #FFFFFF.
With the text layer still selected, use the keyboard shortcut Shift A to apply auto layout.
Select the text layer inside the new frame and change the Horizontal resizing to Fill container and the Vertical resizing to Hug contents in the right sidebar.
Select the frame layer and rename the layer to Content.
Open the Width dropdown menu in the right sidebar and click Add max width.
Set the max width to 250.

Why add a max width?

Tooltips are meant to be concise and helpful. Tooltips can span multiple lines, but keep your lines short and scannable. Adding a max width to the Content layer prevents the tooltip from stretching across the screen and blocking other content.

With the Content layer still selected, set the auto layout properties to the following:
- Set the Horizontal resizing and Vertical resizing to Hug contents
- Change the Flow to Vertical
- Change the Alignment to Align left
- Change the Vertical gap between items to 4
- Change the Horizontal padding to 12
- Change the Vertical padding to 8
Style the frame by adjusting the following settings:
- Click the plus in the Fill section to add a fill
- Change the fill color to #000000
- Change the corner radius to 7

Before moving on, check to make sure your frame looks similar to the following:

Create the main tooltip component.png

Create the arrow

From the Shape tools dropdown in the toolbar, select Polygon.
Click on the canvas to add a polygon.
Select the polygon and press Enter to open vector edit mode.
Select the top point of the triangle and change the corner radius to 1.
Press Enter again to exit vector edit mode.
Change the triangle’s width to 12 and height to 8.
Change the triangle’s fill color to #000000.
Rename the layer to Arrow.
Hold Shift and rotate the arrow 90 degrees.
Center the arrow on the left side of the Content layer.

Create the arrow.png

Add the layers to a frame

You’ll notice that the Arrow and Content layers are not grouped. If we turned these layers into components now, each layer would become an individual component. To connect the layers, we will add the layers to a frame:

Select both layers, then right-click on the selection and choose Frame selection.
Rename the frame to Tooltip/left.

Before moving on, check the left sidebar to make sure the Arrow and Content layers are nested under the new Tooltip/left layer.

Check your work (1).png

Now we need to apply auto layout to the Tooltip/left frame.

Select the Tooltip/left frame and press Shift A to apply auto layout.
Make sure the Clip content checkbox is deselected in the right sidebar.
Set the following auto layout properties:
- Set the Horizontal resizing and Vertical resizing to Hug
- Change the Flow to Horizontal
- Change the Alignment to Align center
- Change the Horizontal gap between items to 0
- Change the Horizontal padding to 0
- Change the Vertical padding to 0
Style the frame:
- Click the plus in the Effects section to add a drop shadow
- Select the drop shadow and change the blur to 16

With the frame still selected, click Create component to turn the tooltip into a main component.

Why add a drop shadow?

Applied correctly, drop shadows create a sense of depth and hierarchy on the screen. They can help gently guide the user’s eye to interactive or important elements.

You might be wondering why we applied the drop shadow to the parent frame, rather than to the Arrow and Content child layers. Drop shadows on parent-level frames are applied evenly to the child layers inside the frame, making it appear as if the layers are a single object. If we were to apply a drop shadow to each child layer, or to a group of layers, the effect would be much less seamless.

drop shadows on a frame vs a group.png

Before moving on, check to make sure your tooltip looks similar to the following:

Check your work after applying the drop shadow.png

Create the major direction tooltip variants

Now that we have our main component, we can use it to add the top, bottom, and right tooltip variants to our component set.

First, we’ll configure the right variant:

Select the component you just created.
Click Add variant in the toolbar to add a variant.
In the new variant, select the Arrow layer.
Drag the arrow to the right of the Content layer or press the right arrow key on your keyboard.
Right-click on the arrow and select Flip horizontal or use the keyboard shortcut Shift H.
Select the new variant again. In the Current variant section in the right sidebar, type arrowDirection in the Property field and right in the Value field. Now, all variants added to this component set will have the arrowDirection property.

Create the right tooltip.gif

Now we need to create the top and bottom variants.

Select the component set and click the purple plus to add another variant.
Select the new variant.
In the Auto layout section in the right sidebar, change the layout flow to Vertical layout.
Select the arrow and hold Shift while rotating it until it points down.
Select the variant and change the arrowDirection property value to bottom.
Repeat the process for the top variant.

Before moving on, make sure your component set has four variants.

Check your work after making four tooltip variants.png

Create the minor direction tooltip variants

All that setup we went through will make it a lot easier for us to create the eight additional variants needed to complete our component set. Creating the minor direction variants will involve moving the arrow’s position and changing the corner radius.

Select the left variant.
Click the purple plus below it to add another variant.
Select the new variant.
Type leftTop in the arrowDirection property value field.
In the Auto layout section, change the alignment to Align top left.

Now, we need to modify the corner radius in the top-left corner so that the arrow blends in with the Content layer.

Select the Content layer in the new variant.
Select Independent corners in the right sidebar.
Change the top-left corner’s radius to 0.

The variant looks much better without that rounded corner.

Create the top left variant.png

Now we can add the final variant for the left-facing tooltips.

Select the leftTop variant and click the purple plus to add another variant.
Select the new variant and type leftBottom in the arrowDirection property value field.
In the Auto layout section, change the alignment to Align bottom left.
Select the Content layer of the new variant and click Independent corners in the right sidebar.
Change the top-left corner radius to 7 and the bottom-left corner to 0.

Repeat the process for the remaining variants. As you add new variants, be sure to add corresponding values to the arrowDirection property value field. For example, topRight, bottomLeft.

Your final component set should look similar to the following: