-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Link tooltip cut off by edge of editor #360
Comments
I've noticed this as well for all the tooltips. It should be detecting the edge of the editor. |
Think I found (part of) the issue. Right now, I'm fiddling with this line Presently, it is adding half of the I made a change to subtract half of the I'm going to keep fiddling, but if anyone has insights please pass them along! |
That code seems to be correct, there just needs to be an extra check to make sure that the value that's calculated is not less than 0, if so it should set it to 0. |
Touché! Trying that now. |
Works, but the issue then becomes that (on smaller screens) the |
It probably needs to wrap depending on it's width then. @jhchen will need to weigh in on how he'd like to handle that. |
Yeah I fixed by getting rid of the Thanks for your comments @willrowe! |
The initial implementation of the tooltip was when Quill was still in an iframe so it necessarily had to be confined within the editor so there was logic that would place the tooltip to avoid being cut off (in the vertical direction as well). Now there's not necessarily that motivation with iframes removed which is why 04c7c27 landed but it looks like just a high @willrowe The high negative margin is because browsers do not correctly report dimensions when an element is hidden. I'm can't remember if/why visibility was passed over as well though. |
@jhchen - How would you feel about:
Alternatively, it'd be possible to avoid the overflow issue outright by using /shrug |
The tooltip placement has been reverted to be within the editor fd099bb. |
Guys, somehow it is not working now again. |
Seems to be working when using Snow theme, but Bubble is definitely broken.
I tried playing around with the CSS, I couldn't get it to work. |
Anyone have a css fix for the url popup on bubble theme? Edit - this looks to fix it. |
I found a solution for my situation: Example:
|
This positions the video tooltip at a fixed position
|
This is what worked for me. Thank you!! |
If anyone is using angular, then you can try the following in your css or scss file ;)
|
This works for me
|
Had the same problem. @petemcwilliams 's solution worked for me |
@FenoRC's solution also work for me. As if
|
You can also add this inside quill editor section script
|
Just add a single line to the position method of the quill Tooltip class
|
@emre-haufe-canei 's solution works for me. |
If you are using angular, try using ElementRef to set bounds property
then in component
|
I used this css since I want to tooltip becaome realtive to selected text |
This will still cut off the right portion of the tooltip if you try to place it on the far right side(not the furthest side though). |
you can change number to put it where exactly you want, the point is if you use transform it will be related to previose location |
Here is a way to do this by using SCSS only if you are still running into this issue within a
|
I add style overflow: "visible" to .ql-container and it fixed for me. |
works for me |
I'm using Modal / Dialog, it still cut off the edge of the Link pop-up |
I'm using it inside a drawer too, but it works perfectly |
How? Can you share ? |
Just the same with the demo:
|
Thanks, it worked for me |
@emre-haufe-canei This worked for me ✅. Thank you for posting this solution 🚀. Note 💡: We can also write a class instead of Code 👇
|
If somebody still facing this issue, ensure that the selector or DOM element for the 'bounds' prop is unique, This means the editorName should be passed as a prop. I experienced a similar issue when rendering the Quill editor twice as a component but using the same 'bounds'.
|
This worked for me. One thing to notice here, that the |
Chrome 42 on a Mac
To reproduce, go to to quill's homepage, and try to add a link to the left-most word on a line. For me, the link tooltip becomes partially obscured. Screenshot attached.
The text was updated successfully, but these errors were encountered: