How to create tooltips?

#1

Have you searched the Docs and Knowledge base? Yes
Principle Version: 5.8
macOS Version: 10.14.5
Sketch Version: 55.2
Description of what you need help with: Creating tooltips over bar graph (example below)

What I’ve done so far

  • Default bar graph in Sketch
  • Separate artboards for each tooltip
  • Duplicate artboarts including a) default graph, b) hover states for tooltip and transparency for the data not being hovered
  • Imported all artboards to Principle and created data hover inside/outside events for tooltips
  • Removed all animations (I will only want to animate the tooltip appearing)

Where I’m stuck

  • I want to control the animation for the tooltip so it’s smooth like the Dribbble example
  • Because the tooltip doesn’t appear on the default graph, I get the error Animate by naming a layer on both artboards “x”
  • There has got to be a better way to do this than how I’m doing it. Can I create components for my individual tooltips and bring those in, instead of a bajillion artboards?

Brand spanking new to animation and Principle, so be cool :sunglasses:

Image: Prototype so far
Image: Artboard organization in Sketch

0 Likes

#2

You could create a small component the size of one column of the graph. The component could uses a hover event to transition to an artboard where the tooltip opacity is set to 1.

this is just like the notification popup in the component tutorial. Just use a hover event instead of a tap event: https://principleformac.com/tutorial.html#components

0 Likes

#3

Thanks for your suggestion, Daniel!

I’ve managed to squeak by with bitmapping my static variables (ie graph sparklines, axes, legend, inactive graph data, etc), and toggling opacity on/off:


(Link to original .prd file)

How might a component here be a more elegant solution? Wouldn’t that only really be helpful if I wanted to change a property beyond opacity, like changing the size or colour of the data bar? It seems simple enough to toggle this with the animation panel.

Is there somewhere else I could use components to make this animation more scaleable? For example, how could I handle changing the shadow without having to click on each instance of the shadow? Would I just convert the shadow layer to a component and manipulate it the way that Sketch uses symbols?

0 Likes

#4

If your method is working for you, then by all means, use that. I recommend taking some time to play around with components to get a sense of when they might be useful.

0 Likes

closed #5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

0 Likes