Docs: Usage of Popover with Accordion

[superstes]

Summary

It would be nice if the docs mentioned that the triggeredBy might not work cleanly if the target element is dynamically created.

Basic example

Working:

<Accordion>
    <AccordionItem>
        <Button id="insideID">Inside</Button>
        <Popover triggeredBy="#insideID">TEST INSIDE</Popover>
    </AccordionItem>
</Accordion>

NOT Working:

<Accordion>
    <AccordionItem>
        <Button id="middleID">Middle</Button>
        <Button id="outsideID">Outside</Button>
    </AccordionItem>
    <Popover triggeredBy="#middleID">TEST MIDDLE</Popover>
</Accordion>
<Popover triggeredBy="#outsideID">TEST OUTSIDE</Popover>

We see the console error No triggers found..

Motivation

This behavior is somewhat unintuitive but the error is logical.

If there is no way around this problem - it would be nice for it to be added to the popover-component docs.

The Popover internally seems to use utils/Popper.svelte that queries for the target-HTML-element on mount. (which might not yet exist)
See: https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/utils/Popper.svelte#L141

Seems to be related: #1389, #1386

[shinokada]

Can you try this?

<Accordion>
  <AccordionItem>
      <Button id="middleID">Middle</Button>
      <Popover triggeredBy="#middleID">TEST MIDDLE</Popover>
      <Button id="outsideID">Outside</Button>
      <Popover triggeredBy="#outsideID">TEST OUTSIDE</Popover>
  </AccordionItem>
</Accordion>