How to build tooltips

Check out the live preview to see a few different ways you can use tooltips. Each example can be built by applying the same concepts we’ll discuss in this tutorial, but we’ll be focusing on this example:

Step 1: Add a div to the canvas and style

Place a div on the canvas, give it a class of “Tooltip Trigger,” and give it these settings:

• Display: Flex
• Flex layout: Horizontal, justify center, align center
• Width: 30px
• Height: 30px
• Position: Relative
• Font color: #eb9581
• Text align: Center
• Background color: White
• Border radius: All sides at 50%

You can also add a drop shadow with these settings:

• Color: rgba(0, 0, 0, 0.16)
• Distance: 1px
• Blur: 19px
• Size: 0px

Congrats! You made a lovely circle:

Now we need to add the plus icon. I used one from Flaticon as an SVG with the color set to #eb9581.

Once you’ve added your icon to the assets panel, drag and drop it into the Tooltip Trigger div. Set the width to 20px when the dialogue box opens and give it a class of “Plus Icon.”

Step 2: Adding the tooltip

Place a div inside the Tooltip Trigger div, give it a class of “Tooltip,” and give it the following settings:

• Display: Flex
• Flex Layout: Horizontal, justify center, align center
• Left and right margin: Auto
• Padding left and right: 10px
• Padding top and bottom: 7px
• Min width: 110px
• Background color: White
• Border radius: 3px

Position settings:

• Position: Absolute, bottom
• Left: -40px
• Right: 0px
• Bottom: 135%
• Z-index: 10

Add a text block to the Tooltip div, and change the text to whatever you’d like.

Next, we’re going to add the little arrow that sits at the bottom of the tooltip. Place a div inside the Tooltip div, give it a class of “Tooltip Arrow,” and apply the following settings:

• Margin left and right: Auto
• Width: 10px
• Height: 10px
• Background color: White
• Transform: Rotate Z 45°

Position settings:

• Position: Absolute, bottom
• Bottom: -5px

It should now look like this

Step 3: Adding the Interactions

We’ve made it to the exciting part — adding the interactions!

Select the Tooltip Trigger div and open the Interactions panel.

Click the plus icon next to the On Selected Element heading. From the dropdown menu, select Mouse Hover as the trigger, then choose Start an Animation from the Action menu.

Click the plus icon on the right side of this panel.

Next, name the animation “Spin Icon On Hover.”

Now, under Timed Actions, click the plus icon and select Rotate from the dropdown menu.

And add the following settings:

• Easing: In Out Quart
• Duration: 0.3s
• Z Rotate: 180°

Add another Rotate timed action by clicking the plus sign again, and apply the following settings:

• Duration: 0s
• Z Rotate: 0°

Close this pane by clicking the X in the top right corner. From this panel scroll down to the Replace Elements in Animation section and select the checkbox. From the dropdown menu next to Replace With: choose Class. In the search box type “Plus Icon” and select that class from the list.

Next, select the checkbox for Limit Affected Elements and leave it on the default selection of Only Children.

We’re now going to add an “On Page Load” interaction to the Tooltip. Select the Tooltip and open the Interactions panel. Click the Plus Icon next to the On Current Page heading.

Select Page Load from the dropdown menu.

From here, open the dropdown menu next to the Action text and select Start an Animation.

Click the Plus Icon.

Name this interaction “Hide Tooltip On Load.”

Click the plus icon next to the Timed Actions text.

Choose Hide/Show and set the Display to “none.”

Add another action for “Rotate” and set the Z Rotate to “12°” and check the box for Set as initial state.

Again, add another action, this one for “Opacity.” Set it to “0%” and check the box for Set as initial state.

That part is done and now we’re now going to set up the interaction for showing the tooltip on hover.

Highlight the Tooltip Trigger div and open the interactions panel. Clicking on the Plus Icon, choose Mouse Hover from the Action dropdown menu and select Start an Animation.

From here we’re going to add three different Timed Actions. The first one is for “Hide/Show” with the Display set to “Flex.”

The second is for “Rotate.” Set the Easing to “In Out Quart” with a Duration of “0.2s,” then add Rotate Z to “0°.” Set the start to “After Previous Action.”

Finally, add a third for “Opacity” with the opacity set to “100%” and a Duration of “0.2s.” Set the start to “With Previous Action.”

Now close this panel by clicking the X in the top right. From here, navigate down to the section titled Replace Elements in Animation and click the checkbox below titled Tooltip Trigger.

From the dropdown menu next to the Replace with: choose Class. In the search panel type “Tooltip” and select it from the list. Then select the checkbox for Limit Affected Elements and leave it as the default, Only Children.

Last phase!

Scroll down to the section titled On Hover Out. From the dropdown menu next to the Action: text, select Start an Animation.

We’re going to create a new animation by clicking on the Plus Icon.

Name this interaction “Hide Tooltip On Hover Out.”

Select the Plus Icon next to the Timed Actions text and choose Rotate. Apply the following settings:

• Easing: Linear(None)
• Duration: 0.2s
• Rotate Z: 12°

Add another timed action for Opacity with these settings:

• Start: With Previous Action
• Easing: Linear(None)
• Duration: 0.2s
• Opacity: 0%

One final timed action of Hide/Show:

• Start: After Previous Action
• Display: None

Close this panel and scroll down to the section titled Replace Elements in Animation. Select the checkbox and, from the dropdown next to the Replace with: text, choose Class.

In the search box type “Tooltip” and select it from the list. Now select the checkbox for Limit affected elements and leave the default Only Children highlighted.

That’s it — we’re done! Preview and enjoy!