2.16 Tooltip

In the Figmaster - Lessons Figma file, open the 2.16 Tooltip page.

Introduction

Tooltips display additional information upon click, hover, or focus. The information should be contextual, useful, and nonessential. Let's create a simple tooltip.

Step 1. Tooltip Trigger

  1. Create a text layer with a "Tooltip Trigger" phrase inside.
  2. Set it to Text M/Medium and Neutral/100.
  3. Add Icon / Info 4 px on the right of the text.
  4. Change the icon size to 20x20 px.
  5. Set its color to Neutral/100.
  6. Group the elements and apply the auto layout.
  7. Rename the group to Tooltip Trigger.
  8. In the Auto layout panel, set the Alignment to Left - Center.
  9. Press CTRL + ALT + K to create a component.

Step 2. Tooltip Content

Part 1. Content

  1. Create a text layer with this placeholder text inside: Assertively deploy resource maximizing supply chains rather than highly efficient information. Progressively leverage other's installed base resources whereas tactical.
  2. Text color: Neutral/10.
  3. Text style: Text S/Regular.
  4. Select the text and press CTRL + ALT + T to align it to the center.
  5. Group it and apply auto layout.
  6. Rename it to Content.
  7. Padding (all sides) should be 8 px.
  8. Color fill: Neutral/100.
  9. Corner radius: 4 px.
  10. Effect: Shadow 2.
  11. Set the Resizing (width) property to Fill container.
  12. Resize to Content group, so it's 280 px wide.

Part 2. Arrow

  1. Open the Polygon tool. This Shape tool does not have a Keyboard shortcut, but we can quickly open it from the top left panel of the Figma UI. It's under Shape tools. You can also open the search menu with CTRL + / and type in Polygon to open it.
  2. Click on the canvas to create a triangle.
  3. Rename it to Arrow.
  4. Press CTRL + E to Flatten the triangle.
  5. Set its color to Neutral/100.
  6. Resize it so its 16 px wide and 8 px high.
  7. Rotate it 180 degrees, so the top is pointing downwards.

Part 3. Grouping it together

  1. Move the Arrow 0 px below the Content group.
  2. Select both elements and align them horizontally.
  3. Group it and apply the auto layout.
  4. Rename it to Tooltip Content.
  5. In the auto layout panel, set the Alignment to Top - Center.
  6. Press CTRL + ALT + K to create a component.

Great work! Let's move on to the last chapter of this module!

PreviousNext