search

themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
https://flowbite-svelte.com
MIT License
2.13k stars 265 forks source link

Tooltip resizing issue #1243

Open jarhan-alcy opened 7 months ago

jarhan-alcy commented 7 months ago

Describe the bug

I'm displaying 2 divs using flex and I have a button with a tooltip in one of them. When the tooltip is displayed, it's not fixed, it resizes.

Reproduction

https://svelte.dev/repl/c2b12769152148c0a15750b30b111af4?version=4.2.11

Flowbite version and System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
    Memory: 2.40 GB / 15.69 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.2 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.0
    flowbite-svelte: ^0.44.23 => 0.44.23
    svelte: ^4.2.7 => 4.2.11
    vite: ^5.0.3 => 5.1.3
shinokada commented 6 months ago

The reproduction is not complete. Please create a working example.

jarhan-alcy commented 6 months ago

I tried on Firefox and Chrome and it seems to work. You just have to hover on the button : flowbite_tooltip

metafab commented 6 months ago

With Chrome 122.0.6261.129, I see many logs of the following error in the console: "ResizeObserver loop completed with undelivered notifications.".

jjagielka commented 6 months ago

The problem seems to be connected with the relative class set at li element. Why do you need it here?

jarhan-alcy commented 6 months ago

@jjagielka , thanks for looking into it! Actually, my content is in a Timeline (and TimelinItem) of flowbite which uses an li element. Here is another example where I use Timeline : https://svelte.dev/repl/f4520f632eec4b06a48d731963d25e00?version=4.2.12 The problem seems to be the same whether I use relative in the classLi property or not

jjagielka commented 6 months ago

@jarhan-alcy just checked your REPL example and noticed again that if you remove the relative class from the TimelineItem the strange behaviour disappear. And once again, I don't see the reason for adding that relative class in that example.

jarhan-alcy commented 6 months ago

I tried again without the relative class in TimelineItem and I have the same problem on Firefox and Chrome. However if I remove the flex class in TimelineItem, the problem disappear. Is there a limitation on using flex in classLi on TimelineItem ?