This is just one of those things in CSS that seems easy to understand (and really, it should be), but it’s sometimes not — because of the way that percentages work in CSS.

Bordering an element with a single repeating image is something that seems like it should be easy with a property called border-image, but the process for actually doing that is somewhat counter-intuitive. Let’s say, for example, that you want to border an element with a repeating heart icon. You can’t do that with a image of a single heart. Instead, you have to make an image of a “frame” of hearts arranged as you’d like them to appear in the border, then slice that image. <img sizes="(min-width: 735px) 864px, 96vw" src='https://i2.wp.com/css-tricks.com/wp-content/uploads/2013/01/enlarged-border-image-slice.png' alt='' data-recalc-dims="1" />Eight hearts in a “frame” image, enlarged to show detail. The red lines indicate slices. If you think that sounds preposterous, you’re in good company. There was a lengthy discussion of the subject on Eric Myer’s blog a few years ago where many frontend development greats weighed in.

If there’s a lot more to aligning icons to text than you expected, then you are not alone.

Basically, the idea is that a train tried to start with the caboose brakes stuck on. After releasing the caboose, the train still could not start. The problem was that when the train attempted to start with the caboose brake on, it stretched all the inter-car couplings so that the whole train was just like one big car. At this point, the friction from the engine train wheels was not enough to get the whole thing going. Instead, you need to just get one car moving at a time - this is why there is space between the couplings.

And to illustrate another way actions are helpful, take your above example and put the button into a {{#each}}. It gets more complicated.

Another problem I ran into was knowing when an element is removed. I had to add a MutationObserver on the current tooltip target so if it gets removed by Svelte while the tooltip is visible (e.g. if a click moves to another route) the tooltip isn't left hanging around on the screen. No mouseleave/mouseout events are dispatched on elements that are removed.