Updated:
Nov 8, 2023
Type:
No-code
Notes
Creating tooltips using relative overlays is a breeze — check out Framer's walkthrough that's linked below.
This is a workaround to enable us to add a border to shapes in a union— it uses an SVG beak that overlays part of the border.
Framer struggles with pixel-perfect rendering of vectors so you may see different performance on the Canvas/Preview vs. live. The app is much better at rendering vectors on the canvas.
The beak + border version will only work if your colours are 100% opacity and the border is 1px. I'm using a shadow with 1px spread rather than a border to make the alignment easier.
As you can't assign variables to colours in graphics, you'll have to manually adjust the beak colours. You can assign styles though so it will work with dynamic theming.
Resources
Help
How do I add Framer components?