You can utilize the active state interaction to recreate the "shop the look" style interaction seen on many websites. This allows you to hover over an element on your page, and have a "information pop-out" appear.

Example Setup

This requires the use of states across several objects. Our example starts with three circles. You can apply this setup to as many elements or different kind of elements as your page requires. Hovering over each circle will display a piece of text that corresponds with it's placement over the image.

Each circle is made up of a container (e.g, First Circle), a text component that we want to be revealed (e.g, Circle 1 Text), and a circle component object (e.g, Circle 1.)

To build this setup, let's start by creating a custom state on our text component. We'll call this state "Tooltip Show." This is the state that will be revealed on hover. 

Then we'll style this state. We want it to appear slightly offset, and gave it a border to and background to pop-out.

Next, we'll go back to the Default state of our text and hide it from view by setting it's opacity to 0%.

Now our text is setup, so we'll move to the interactions that power this setup on the Circle 1 circle component. We'll create an "On Mouse Over" interaction, set to "Activate State" on the corresponding "Circle 1 Text." The state we'll have it activate is "Tooltip Show."

Finally, on the container of our circle called First Circle, we're going to add two more "On Mouse Over" interactions. This will ensure we hide the text after we're done viewing it.

We'll want that to set "Circle 1 Text" to it's default hidden state on hover like this.

You can repeat these steps for as many elements as you'd like to have! If you have questions about this setup, feel free to reach out.