FIGMA TIP: How to build a responsive tooltip with pointers that stay where they should. Keep reading for step-by-step instructions..

#1. Create the body frame Create a frame and place a default text layer inside. Then add auto layout with the resizing behavior set to “hug”.

#2. Create the pointers frame Create a frame and place three triangles inside. Then constrain each one to its position (left, center, right).

#3. Bring it all together Nest the body frame and the pointers frame into a new auto layout frame (Shift + A). Then set the resizing behavior for the pointers frame to “fill container”.

#4. Final touch Hide two of the pointers by selecting the “eye” icon in the layers panel. Then remove the frame fill color.

#5. Customize the tooltip Add text to the tooltip and watch it grow and shrink.

#6. Take things to the next level Use your tooltip as a base component and create variants for each pointer position.