Popper-core: Tooltip overflowing body

[Simonwep]

CodePen demo

Sorry, already got this in a JSFiddle:
https://jsfiddle.net/0x7cpavb/

Steps to reproduce the problem

1. Put element on the very right of the page
2. Use element as reference element for tooltip.js

What is the expected behavior?

Popper prevents this kind of clipping

What went wrong?

The tooltip gets clipped by the body

Any other comments?

Used the latest versions via unpkg. Not sure if this really is an issue, but I tried (and searched) in the docs for almost 3 hours and couldn't fix it :suspect:

Thx for this awesome library :)

[oliver-dvorski]

That's a bug as far as I can tell.

Tried reproducing it with popper and it would seem that all is fine as long as your tooltip isn't a child of the reference element (https://codesandbox.io/embed/3v35klj546) so maybe you'd want to try using Popper for your tooltip positioning needs?

[shamel67]

That's a bug as far as I can tell.

Tried reproducing it with popper and it would seem that all is fine as long as your tooltip isn't a child of the reference element (https://codesandbox.io/embed/3v35klj546) so maybe you'd want to try using Popper for your tooltip positioning needs?

I tried that sandbox you shared and the popper is cut-off/not positioned correctly, regardless wether it's a child or not. Running Chrome 74.

[Simonwep]

Since this seams like a bug and is kinda an essential part of popper, could @FezVrasta take a look at it? :suspect:

[shamel67]

I have a very similar issue - except my tooltip is pretty complex.
I'm attaching an example of a tooltip that works perfectly, and another one overflowing at right.

I tried a bunch of different things without success (specifying CSS dimensions, using boundariesElement, container, etc.).

My code is the simplest it can be - I would expect popper to calculate the tooltip dimension and find the best position automatically:

new Tooltip($('#abc143'), { html: true, title: `<div class="cards_popup_header"><span class="date">${date}</span></div> <div class="body"><div class="list_wrapper"><ul class="fa-ul">${listItems}</ul></div></div>` });

[smth]

Anyone know if there is a version without this bug?

[atomiks]

It's because the arrow has no size. Give it width: 1px and problem is gone

https://jsfiddle.net/3jafz07e/

[smth]

That doesn't seem to fix the original jsfiddle @atomiks (nor my local version). Is this issue specific to tooltip.js? I'm using popper.js, and not aware of .tooltip-arrow existing.

[atomiks]

Remove the boundariesElement / container options and it is fixed in that version as well. The boundariesElement should be document.body not 'body', I think

[Simonwep]

@atomiks Using document.body cuts of the tooltip completely: https://jsfiddle.net/9nL3hje0/ (Even stranger it behaves differently than using a string which should be the same). And according to the tooltip.js doc it's also possible to use a String e.g. Query Selector.

[atomiks]

You didn't add the .tooltip-arrow CSS width. It's fixed w/ that

I think it's because the selector needs to be a child of the ref or popper. So that's why it doesn't work (not based on document)

[Simonwep]

This seems more like a hack and not an expected user experience when using this. Shouldn't this be optional? :suspect:

Is the thing with the selector explained in the docs? I can only find _"Append the tooltip to a specific element."_

[atomiks]

I think it's because the default tooltip template includes the arrow. And Popper's calculations require the arrow to have width if it exists as a child with the modifier enabled.

I think I'm wrong on the querySelector thing looking at the source so that's weird.

tbh, maybe @FezVrasta can deprecate Tooltip.js and recommend Tippy.js instead? Especially v5 coming which will be much closer in total bundle size. The most important part of this package is the positioning engine itself so maybe he can purely focus on that instead of Tooltip.js in the future. And no need for the monorepo setup.

[FezVrasta]

@atomiks yes that's a good plan, Tooltip.js was meant as a way to show how to implement Popper.js into your own libraries, but I see a lot of people want to use it as-is.

[Wyzix33]

Tooltip.js is perfect for simple projects and way more easy to debug than Tippy.js

[atomiks]

@Wyzix33 may you make an issue on tippy repo about the debugging difficulties? What makes it harder? Would be helpful to understand in case it requires a large API change before v5 comes out

[FezVrasta]

Hi, I'm interrupting the development of the tooltip.js library to focus on the development of @popperjs/core (Popper.js v2).

Please consider switching to Tippy.js, which is a way better alternative to Tooltip.js and is well maintained. Tippy.js still uses Popper.js under the hood, so you will find all your favourite features.

I'll close this issue.