Popover.Provider similar to Tooltip.Provider

[raymonddaikon]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Would be nice to have a Popover.Provider to enable groups of popovers similar to how tooltips are handled. I'd like to have popovers seamlessly transition into each other (if their triggers are adjacent) instead of closing and opening a new one. Currently this is partially possible with Tooltips if you use multiple triggers under a single Root with a single Tooltip.Content and the customAnchor prop.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[huntabyte]

Can you provide some more detail/images/video about what you're looking to accomplish?

I'll be upfront and say it's unlikely we'll have a Popover.Provider, but perhaps there's a way we can make what you're trying to do a bit easier, I just need to see it.

[raymonddaikon]

Sure, I found a good example of what I'm trying to accomplish in the floating-ui issues here. I believe this should be relatively straight-forward to accomplish in svelte. I'll update once I get something working with svelte floating-ui.

[raymonddaikon]

Got it working pretty easily with floating ui

Screen.Recording.2024-10-02.at.18.57.09.mov

and the code I used to get this effect, note: I'm using the watch utility from runed.

 let navTooltipOpen = $state(false)
 let navTooltipContent = $state('')
 let tooltipAnchor = $derived(document.getElementById(navTooltipContent))
const floating = useFloating({
   whileElementsMounted: autoUpdate,
   get open() {
     return navTooltipOpen
   },
   onOpenChange: (v) => (navTooltipOpen = v),
   placement: 'right',
   get middleware() {
     return [offset(16)]
   },
 })
 watch(
   () => navTooltipContent,
   () => {
     floating.elements.reference = tooltipAnchor
   },
 )

[huntabyte]

Mind dropping a stackblitz/repo or similar to demonstrate this behavior using Svelte 5 and floating UI? It will help me determine/test some ideas I may have to solve this 😃

[raymonddaikon]

Sure thing, here's a sveltelab repl, let me know if there's anything wrong with it. Edit: Sveltelab is kind of weird when coming to picking up document, so initially comment out the tooltipAnchor line then uncomment it when the container fully loads.

[shyakadavis]

Allow me to chime in:

@huntabyte, @anatolzak once did something similar that I copied for a project.

Hope it helps, at least in regard to comparing against @raymonddaikon's example for the best approach forward.

• Demo: https://dynamic-tooltip-svelte.vercel.app/
• Repo: https://github.com/anatolzak/dynamic-tooltip-svelte