Instead of having the text visible for each plot point, I would like for them to appear on a hover response and disappear when the user no longer hovers over its corresponding plot point.
This section is currently made up of a grid layout. On one side is the section text, on the right side is an image placeholder.
My question is what is the best way to construct this? Can I simply upload the graph as an svg image and create hover responses for the plot points? Or should I construct the entirety of the graph itself in webflow?
I hope this makes sense. Any help is highly appreciated!
I guess I’ve been intimidated with trying to build in WF… I still havent gotten the positioning of elements down pact whilst also ensuring that responsiveness ––– but I will give this a go and inquire further if I run into roadblocks!
Also thank you for the RWive rec, I was unaware of this tool
The only WF part would actually be the interactions, the rest is just the basic HTML + CSS design work.
Here are a few things I’d do that might help;
Consider the entire graph plus labels as a single piece. You don’t want to make it responsive ( as in layout changes ) but you do want it to be scalable so that you can constrain the width on mobile screens.
Use a DIV, for your canvas, and give it bottom and left dashed borders. Make that div position relative.
Each of the data points within the canvas should be positioned absolutely with the top and left using % measurements ( right and bottom unspecified ), and should consist of a DIV with the bullet art and the label both inside that div. The absolute positioning lets your chart scale without the data point losing its position within the chart.
Assign classes to both the bullet and the label. When you design your interaction to fade in fade out the label, you’ll set the interaction so that it triggers on hover over your bullet class, and only affects the sibling element with the label class.
I’ve some notes here on the layout part ( not the interaction part ).
I will take a stab at this shortly