React-joyride: Support for a target with multiple elements.

Created on 22 Feb 2019 · 8Comments · Source: gilbarbara/react-joyride

I'd like to target multiple elements for tooltips.

If a selector turns one element that's fine. Just call getBoundingClientRect on it and it should work find.

If multiple are returned just compute the bounding client rect of all of them.

This is necessary if you have like a nav bar with multiple buttons that you'd like to highlight.

I can't create a new selector as some of the react libs we're using don't provide this functionality (react-table).

This is easy to do. Just take each boundingClientRect and merge them into a larger boundingClientRect.

I can post some sample code on how to do that if necessary.

Source

burtonator

Most helpful comment

Not sure if anyone is still interested in this, but I wrote a gist for how I was able to solve this problem for my use case. We had a table and we wanted to highlight one or more columns and there was no good single selector to do it.

https://gist.github.com/raykhenberg/83581ece138c0079ed089b2048c4c14e

This adds a little bit of overhead, so we're only going to use it in cases where we need the multiselect capability, but it effectively just passes through the steps after determining the smallest overlay that encompasses all of them and attaches a transparent div which gets used as the anchor for any step.

raykhenberg on 2 Oct 2019

👍3

All 8 comments

left = Math.min(...rects.map( current => current.left));
right = Math.max(...rects.map( current => current.right));

top = Math.min(...rects.map( current => current.top));
bottom = Math.max(...rects.map( current => current.bottom));

... that would work.

burtonator on 22 Feb 2019

Not sure I understand what you are proposing.
You can have multiple steps for different targets...