Create a tooltip component set – Figma Learn - Help Center

If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →

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:

The final tooltip component set with 12 variants.

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”.
Highlight the text and use the Text section in the right sidebar to change the font size to 13. We’re using the default font Inter 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 turn it into an auto layout frame.
Select the text layer inside the new frame and change the horizontal resizing to Fill and the vertical resizing to Hug in the Frame section in the right sidebar.
Select the frame layer and rename the layer to Content.
Open the Width field 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
- Change the layout flow to Vertical layout
- Change the auto layout alignment to Align left
- Change the horizontal 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:

The Content layer inside Figma design. There are outlines around the Frame, Auto layout, and Fill sections in the right sidebar to highlight the setting configurations in those areas.

Create the arrow

From the Shape tools dropdown in the toolbar, select Polygon.
Click on the canvas to add a triangle.
Double-click on the triangle to enter vector edit mode.
Select the top point of the triangle and change the corner radius to 1.
Double-click on the canvas or select Done in the toolbar to exit vector edit mode.
Use the settings in the right sidebar to 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 to the left.
Center the arrow on the left side of the Content layer.

A GIF demonstrating how to add the arrow layer to the canvas.

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 the Frame tool from the Region tools dropdown menu in the toolbar or press F.
Click and drag the Frame tool around the Arrow and Content objects on the canvas to add them to a new frame.
Rename the frame to Tooltip/left.

Note: Before moving on, check the left sidebar to make sure the Arrow and Content layers are nested under the new Tooltip/left layer. The left sidebar in Figma showing the Tooltip/left, Arrow, content and text layers.

Deselect the Clip content checkbox in the right sidebar.
Use the keyboard shortcut Shift A to turn it into an auto layout frame.
Set the auto layout properties to the following:
- Set the horizontal resizing and vertical resizing to Hug
- Change the layout flow to Horizontal layout
- Change the auto layout 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 minus in the Fill section to remove the frame’s fill
- 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 in the toolbar to create a component.

Why add a drop shadow?

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

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 layers inside the frame, making it appear as if the child 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.

A frame and a group with a drop shadow applied.

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

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.

A GIF demonstrating how to create a new variant and modify the variant property in the right sidebar.

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 and looks similar to the following:

The component set with the four major direction variants.

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.

A GIF demonstrating how to add a new variant and change the corner radius.

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:

The final tooltip component set with 12 variants

What’s next?

Congratulations! Your customizable tooltip component set is ready to be used in your designs. If you’re looking for another challenge, modify your component set to include another variant property for an optional description field. If you design something you're extra proud of, we'd love to see it! Mention us on X (formerly Twitter) @Figma or publish it to the Figma Community.

A tooltip component with a title and description.

···