Using "tooltip tooltip-bottom" will render under relatively-positioned text below

[dennisjlee]

In my app, I was trying to put multiple items in a list with a Daisy tooltip on each item. If I use the classes "tooltip tooltip-bottom", then the tooltip on one item will overlap the item below. But instead of rendering above the item, the tooltip appears underneath the item below (see screenshot).

Example markup:

        <div
          class="tooltip tooltip-bottom tooltip-accent block"
          data-tip="HELLO WORLD"
        >
          hello world
        </div>
        <div
          class="tooltip tooltip-top tooltip-accent block"
          data-tip="GOOD NIGHT MOON"
        >
          good night good night good night
        </div>

Expected behavior:

Actual behavior:

I have a sandbox showing the bug here, with an attempt at a fix using z-index:

https://codesandbox.io/s/daisy-ui-tooltips-overlapping-hw825v?file=/index.html

[adam-seedata-io]

Give this a try
Added these classes to the tooltip before:z-50 before:content-[attr(data-tip)]

        <div
          class="before:z-50 before:content-[attr(data-tip)] tooltip tooltip-bottom tooltip-accent block"
          data-tip="HELLO WORLD"
        >
          hello world
        </div>
        <div
          class="before:z-50 before:content-[attr(data-tip)] tooltip tooltip-top tooltip-accent block"
          data-tip="GOOD NIGHT MOON"
        >
          good night good night good night
        </div>

[dennisjlee]

Thanks - I might also just throw in a global rule like this: ``` .tooltip::before { @apply z-50; } ```