Tooltip is cut out

[FezVrasta]

Steps for Reproduction

1. Visit https://codepen.io/FezVrasta/pen/jOEppjg
2. Select "The" in the text so that the tooltip appears

Expected behavior:

The tooltip should be completely visible.

Actual behavior:

The left side of the tooltip is cut out.

Platforms:

N/A

Version:

1.3.6

Additional notes:

An easy solution for this (and a whole set of similar problems) would be to use a library such as Popper.js to position the tooltips. Such libraries focus on the positioning problem and allow optimal positioning in all of these edge cases.

I could prepare a PR to integrate Popper.js into Quill if you'd like to. The upcoming version is very lightweight so it wouldn't add much footprint to Quill.

[martinstoeckli]

Had a similar problem when editing a link on the top most line, in this case the tooltip editor will be placed outside of the quill editor and is therefore not visible. I solved the problem by inserting this lines in function position() of the Tooltip, I'm not sure about other side effects though:

var verticalShift = reference.bottom - reference.top + height;

// instead of placing the link editor above and outside of visible scope, place it below
if (top - verticalShift < 0) {
  verticalShift = -16; // counter css ql-flip transform
}

this.root.style.top = top - verticalShift + 'px';

[marcoancona]

+1 to use Popper.js to position the tooltip

[digitalcortex]

Steps for Reproduction

1. Visit https://codepen.io/FezVrasta/pen/jOEppjg
2. Select "The" in the text so that the tooltip appears

Expected behavior:

The tooltip should be completely visible.

Actual behavior:

The left side of the tooltip is cut out.

Platforms:

N/A

Version:

1.3.6

Additional notes:

An easy solution for this (and a whole set of similar problems) would be to use a library such as Popper.js to position the tooltips. Such libraries focus on the positioning problem and allow optimal positioning in all of these edge cases.

I could prepare a PR to integrate Popper.js into Quill if you'd like to. The upcoming version is very lightweight so it wouldn't add much footprint to Quill.

Is there any way to add Popper.js to the web app built with Quill without much pain?

[cdmistman]

I solved the problem by inserting this lines in function position() of the Tooltip

That solution mitigates it by moving the tooltip down. has anyone been able to make the tooltip appear as-expected here?

[katywings]

@luin I'd love to see the Popper.js change (mounting the tooltips to the body) in quill v2 :). Let me know if I can help 😊.

[luin]

@katywings It definitely makes sense to integrate Popper or Floating UI in tooltips but we are finalizing v2 API and I hope to release v2 soon so the integration probably will be delayed to v3 or be implemented outside of the core package as an addon.

[katywings]

Since this started to become a blocker for me more and more, I started working on the floating ui integration in a fork of the current develop branch. Its not finished yet, but I got the main issues figured out. So far it already does:

• Attach the tooltips to the body
• Stick the tooltips to the selection range
• Handle scroll events (Editor and body)
• Flip depending on available space
• Stop before it runs out of the screen

I will probably release the fork as @lufrai/quill or something like that because I need this in my CMS 😅. As soon as I am done I will get back to you, then you can decide if you want a PR 😁.

Edit:

• Here is the commit: https://github.com/lufrai/quill/commit/a918acd353d78850bdb1a6429c3487feed997633
• Performance optimizations: https://github.com/lufrai/quill/commit/2ca2b39465030e660d2d3369aa55d30c621abde3
  • (Attaching all tooltips in one wrapper div resulted in performance issues for Chrome. This commit fixes those issues and a bunch more)

Demonstration of the changes (quill bubble instances in my cms):

Demo

[katywings]

Just in case, if somebody wants to try this out: Sometime ago I release a fork with the changes here: https://www.npmjs.com/package/@lufrai/quill

I also just updated the fork with the state of the current develop branch. My own changes are versioned here: https://github.com/lufrai/quill/commits/floating/

@luin I would love to get this merged ofc and still am open for a PR ;).

[katywings]

Quick info (@luin): I updated the fork to quill 2.0.3, here is the new commit with the floating-ui changes: https://github.com/lufrai/quill/commit/01c60db9dc8956c88efe1745039353f6a0ccb2e2

P.S. Happy new year by the way 😅🎉🙋‍♀️!

[liangpengyv]

I encountered the same problem