Link tooltip cut off by edge of editor

[brettimus]

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.

[willrowe]

I've noticed this as well for all the tooltips. It should be detecting the edge of the editor.
Also, something I've been wondering about for awhile @jhchen, why do the tooltips use a high negative number for the left css property to hide them instead of visibility: hidden or display: none? Ideally, I'd think you'd just want to add a class like ql-active to the tooltip and have the correct display value in the CSS files.

[brettimus]

Think I found (part of) the issue. Right now, I'm fiddling with this line

Presently, it is adding half of the referenceBounds.width and subtracting half of the tooltipBounds.width from an offset to calculate the left attribute of the tooltip.

I made a change to subtract half of the referenceBounds.width and add half of the tooltipBounds.width, and the tooltip no longer gets cut-off, but its placement seems slightly off.

I'm going to keep fiddling, but if anyone has insights please pass them along!

[willrowe]

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.

[brettimus]

Touché! Trying that now.

[brettimus]

Works, but the issue then becomes that (on smaller screens) the Change Remove and Done links get cut off on the right. 😬

[willrowe]

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.

[brettimus]

Yeah I fixed by getting rid of the white-space: nowrap; style on the .ql-tooltip class. But I'm assuming that's there for a reason sooooo. Yeah.

Thanks for your comments @willrowe!

[jhchen]

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 z-index on the tooltip is not sufficient--the overflow-y on .ql-container needs to be removed as well to fix this particular issue. However this is an important rule to allow scrolling in the editor so I'm not sure right now what the best solution is but thought I'd add some context.

@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.

[brettimus]

@jhchen - How would you feel about:

• Ensuring the left attribute is non-negative
• Removing white-space: nowrap; from the CSS on ql-tooltip (replacing with white-space: normal?)

Alternatively, it'd be possible to avoid the overflow issue outright by using fixed instead of absolute positioning for the tooltip(s)... but that would in turn require redoing the position calculations.

/shrug

[jhchen]

The tooltip placement has been reverted to be within the editor fd099bb.

[ArtemBernatskyy]

Guys, somehow it is not working now again.
Using react-quill (quill is the latest version).

[Carl012]

Seems to be working when using Snow theme, but Bubble is definitely broken.

• Go to: https://quilljs.com/docs/themes/
• Scroll to the Bubble sample
• Enter some text on the first line
• Turn the first word into a link
• Hover the link. The bubble tooltip is cut off by the edges of the editor.

I tried playing around with the CSS, I couldn't get it to work.

[petemcwilliams]

Anyone have a css fix for the url popup on bubble theme?
Confirmed the issue is visible on https://quilljs.com/docs/themes/ as @Carl012 describes.
Just paste a url into top line then hover over it to see issue.

Edit - this looks to fix it.
.ql-editor {
overflow: visible;
}

[FenoRC]

I found a solution for my situation:
when create the configuration object, set property 'bounds' with the selector of quill container.

Example:

const SELECTOR_CONTAINER = '#quill-container-2';
const DEFAULT_CONFIG = {
        theme: 'bubble',
        bounds: SELECTOR_CONTAINER
};

new Quill(SELECTOR_CONTAINER, DEFAULT_CONFIG);

[cmd05]

This positions the video tooltip at a fixed position

$(document).ready(
   function() {
         $('.ql-video').click(function() {
            $('.ql-tooltip').css("left", "0");
            $('.ql-tooltip').css("margin-left", "10px");
            $('.ql-tooltip').css("top", "0");
            $('.ql-tooltip').css("margin-top", "2px");
         }
      );
   }
);

[TheAustinG]

I found a solution for my situation:
when create the configuration object, set property 'bounds' with the selector of quill container.

Example:

const SELECTOR_CONTAINER = '#quill-container-2';
const DEFAULT_CONFIG = {
        theme: 'bubble',
        bounds: SELECTOR_CONTAINER
};

new Quill(SELECTOR_CONTAINER, DEFAULT_CONFIG);

This is what worked for me. Thank you!!

[Brijeshlakkad]

If anyone is using angular, then you can try the following in your css or scss file ;)

::ng-deep.ql-tooltip {
    left: unset !important;
}

[thangnq1001]

This works for me

.ql-tooltip {
  left: 0 !important;
}

[robinjhuang]

Had the same problem. @petemcwilliams 's solution worked for me

[emre-haufe-canei]

@FenoRC's solution also work for me. As if bounds not defined, tooltips positioned using document. I could also use this solution for react implementation ReactQuill like:

<div data-text-editor="name">
     <ReactQuill
            theme="snow"
            value={formContext[name]}
            onChange={handleTextChange}
            bounds={`[data-text-editor="name"]`}
          />
</div>

[ashishmishra-spec]

You can also add this inside quill editor section script

$("a").click(function() { $(".ql-tooltip").css('left', 0+'px'); $(".ql-editing").css('left', 0+'px'); });

[nomad-vagabond]

Just add a single line to the position method of the quill Tooltip class
left = Math.max(left, 0)
to patch negative value. This way tooltip's position will be still floating but set to zero in case it is out of the left bound.

    value: function position(reference) {
      var left = reference.left + reference.width / 2 - this.root.offsetWidth / 2;
      left = Math.max(left, 0)
      // root.scrollTop should be 0 if scrollContainer !== root

[tuananhlai]

@emre-haufe-canei 's solution works for me.

[lakindu2002]

i am facing this issue still. anyone figured out how to solve it? none of the solutions above work for me

[rhdn520]

If you are using angular, try using ElementRef to set bounds property

<div #editorContainer>
        <quill-editor [bounds]="editorContainer"></quill-editor>
</div>

then in component

@ViewChild('editorContainer') editorContainer?:ElementRef;

[aliakbarazizi]

I used this css since I want to tooltip becaome realtive to selected text
transform: translateY(10px) translateX(50%);

[Ixiondbz]

I used this css since I want to tooltip becaome realtive to selected text transform: translateY(10px) translateX(50%);

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).

[aliakbarazizi]

I used this css since I want to tooltip becaome realtive to selected text transform: translateY(10px) translateX(50%);

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

[jisaar2]

Just add a single line to the position method of the quill Tooltip class left = Math.max(left, 0) to patch negative value. This way tooltip's position will be still floating but set to zero in case it is out of the left bound.

    value: function position(reference) {
      var left = reference.left + reference.width / 2 - this.root.offsetWidth / 2;
      left = Math.max(left, 0)
      // root.scrollTop should be 0 if scrollContainer !== root

Here is a way to do this by using SCSS only if you are still running into this issue within a p-editor Angular component:

::ng-deep div[style*="left: -"] {
  &.ql-tooltip {
    left: unset !important;
  }
}

[nikkhah63]

I add style overflow: "visible" to .ql-container and it fixed for me.

[JelynValcorza]

How to resolve this ? It ain't working all your recommend resolution ideas

[trend-alan-bie]

@FenoRC's solution also work for me. As if bounds not defined, tooltips positioned using document. I could also use this solution for react implementation ReactQuill like:

<div data-text-editor="name">
     <ReactQuill
            theme="snow"
            value={formContext[name]}
            onChange={handleTextChange}
            bounds={`[data-text-editor="name"]`}
          />
</div>

works for me

[JelynValcorza]

@FenoRC's solution also work for me. As if bounds not defined, tooltips positioned using document. I could also use this solution for react implementation ReactQuill like:

<div data-text-editor="name">
     <ReactQuill
            theme="snow"
            value={formContext[name]}
            onChange={handleTextChange}
            bounds={`[data-text-editor="name"]`}
          />
</div>

works for me

I'm using Modal / Dialog, it still cut off the edge of the Link pop-up

[trend-alan-bie]

@FenoRC's solution also work for me. As if bounds not defined, tooltips positioned using document. I could also use this solution for react implementation ReactQuill like:

<div data-text-editor="name">
     <ReactQuill
            theme="snow"
            value={formContext[name]}
            onChange={handleTextChange}
            bounds={`[data-text-editor="name"]`}
          />
</div>

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

[JelynValcorza]

@FenoRC's solution also work for me. As if bounds not defined, tooltips positioned using document. I could also use this solution for react implementation ReactQuill like:

<div data-text-editor="name">
     <ReactQuill
            theme="snow"
            value={formContext[name]}
            onChange={handleTextChange}
            bounds={`[data-text-editor="name"]`}
          />
</div>

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 ?

[JelynValcorza]

It looks like this..

[trend-alan-bie]

Just the same with the demo:

    <Box height={height} data-text-editor="editor">
      <CustomToolbar />
      <ReactQuill
        readOnly={previewMode}
        ref={editorRef}
        theme="snow"
        modules={modules}
        formats={formats}
        defaultValue={value}
        value={value}
        onChange={onChange}
        bounds={'[data-text-editor="editor"]'}
      />
    </Box>

[ezhupa99]

If anyone is using angular, then you can try the following in your css or scss file ;)

::ng-deep.ql-tooltip {
    left: unset !important;
}

Thanks, it worked for me

[SurajanShrestha]

@FenoRC's solution also work for me. As if bounds not defined, tooltips positioned using document. I could also use this solution for react implementation ReactQuill like:

<div data-text-editor="name">
     <ReactQuill
            theme="snow"
            value={formContext[name]}
            onChange={handleTextChange}
            bounds={`[data-text-editor="name"]`}
          />
</div>

@emre-haufe-canei This worked for me ✅. Thank you for posting this solution 🚀.

Note 💡: We can also write a class instead of data-text-editor and it will still work.

Code 👇

<div className="my-editor-container">
     <ReactQuill
          theme="snow"
          value={formContext[name]}
          onChange={handleTextChange}
          bounds={`.my-editor-container`}
     />
</div>

[trend-alan-bie]

How? Can you share ?

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'.

    <Box
      height={height} minHeight={minHeight} onFocus={onFocus}
      className={error ? 'error' : ''} data-text-editor={editorName}
    >
      {!previewMode && <CustomToolbar toolbar={toolbar} /> }
      <ReactQuill
        readOnly={previewMode}
        ref={editorRef}
        theme="snow"
        modules={modules}
        formats={formats}
        defaultValue={value}
        value={value}
        onChange={onChange}
        bounds={`[data-text-editor=${editorName}]`}
      />
    </Box>

[ashvin777]

I found a solution for my situation: when create the configuration object, set property 'bounds' with the selector of quill container.

Example:

const SELECTOR_CONTAINER = '#quill-container-2';
const DEFAULT_CONFIG = {
        theme: 'bubble',
        bounds: SELECTOR_CONTAINER
};

new Quill(SELECTOR_CONTAINER, DEFAULT_CONFIG);

This worked for me. One thing to notice here, that the bounds container element needs to be mounted before it will render the Quill container. So you should prefer the ref the container from its parent component instead of passing the parent from the same component. That might solve some of the issues you guys are facing.