Popover positioning within sidebar with position fixed

[jcorporation]

I implemented a left sidebar with position:fixed set. I tried to open a popover on the right and set data-bs-placement="right" as documented. The popover always opens on top, not on the right.

Removing the position:fixed from the sidebar lets open the popover on the right side.

Digging through your code in the styleTip function. The popover is always wider than the calculated rightBoundry and thats why the popover is not placed on the right side.

Changing this: const rightBoundry = fixedParent ? parentCWidth + parentLeft + (RTL ? scrollbarWidth : 0) : parentCWidth + parentLeft + (htmlcw - parentRight) - 1; to const rightBoundry = parentCWidth + parentLeft + (htmlcw - parentRight) - 1; places the popover correctly.

[thednp]

Hi Joerg. The formula I've written is set to handle all possible cases, including popovers/tooltips inside modals/offcanvas, but unfortunately position fixed containers couldn't be solved easily.

I'm working on a new build, fully typescript based, and the popover/tooltip prototype will use a much more simple algorithm to compute position, but unfortunately I'm having problems configuring up a proper tooling setup (vite based).

Let me know if you're interested.

[jcorporation]

For my current issue, I needed a fast fix and I will implement a fix that work with my environment.

Let me know if you're interested.

For the future I will gladly try your new code.

[thednp]

@jcorporation can you please test latest master and let me know how it goes :)

[jcorporation]

@thednp: works also!

[jcorporation]

One issue stays with the new code: very high popovers overflows the window bottom. In my patched version, I detect this, move the popover as much as possible to top and if this does not suffice I make the popover content scrollable.

[thednp]

Can you provide a screenshot or something? I don't think scrollable popovers are a good idea though.

[jcorporation]

Sure:

[thednp]

@jcorporation what is the expected outcome?

[jcorporation]

The popover should begin more above, so that it does not crop at the bottom.

[thednp]

@jcorporation I am working on Tooltip/Popover to simplify the algorithm a bit:

• the media elements (<SVG>, <IMG>) no longer do updates on mousemove events, basically everything works the same as any other element, this makes for a superior performance and smaller footprint
• I'm now investigating ways to update the styleTip to take your case into consideration, I think it's a solid point to do so