I am using React-Quill (react-quill-new) with the Bubble theme, and I am facing an issue where the link preview tooltip gets cut off when I hover over a link that is inserted in the first few lines of the editor. However, if I insert the link further down (e.g., 3rd or 4th line), the tooltip appears correctly.

I suspect this issue is related to the bounds setting or how Quill calculates tooltip positioning near the top of the editor.

Here's my Editor component:

'use client'

import dynamic from "next/dynamic";
import "./EditorStyle/bubble.css";
import Quill, { Parchment } from "quill";
import { StyleAttributor } from "parchment";
import { useMemo } from "react";

const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });

const AlignStyle = new StyleAttributor("align", "text-align", {
  scope: Parchment.Scope.BLOCK
});
Quill.register(AlignStyle, true);

const ColorStyle = new StyleAttributor("color", "color", {
  scope: Parchment.Scope.INLINE,
});
Quill.register(ColorStyle, true);

const BackgroundStyle = new StyleAttributor("background", "background-color", {
  scope: Parchment.Scope.INLINE,
});
Quill.register(BackgroundStyle, true);

const FontStyle = new StyleAttributor("font", "font-family", {
  scope: Parchment.Scope.INLINE,
});
Quill.register(FontStyle, true);

export const Editor = ({ content, onChange, className }: { content: any, className: string, onChange: (value: string) => void }) => {
  
  const module = useMemo(() => ({
    toolbar: {
      container: [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        ["bold", "italic", "underline"],
        ['link'],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'color': [] }, { 'background': [] }],
        ['clean'],
        [{ 'font': [] }],
        [{ 'align': [] }],
      ],
      handlers: {
        link: function (value: string) {
          const that: any = this;
          const tooltip = that.quill.theme.tooltip;
          const input = tooltip.root.querySelector("input[data-link]");
          input.dataset.link = "google";

          if (value) {
            const range = that.quill.getSelection();
            if (range == null || range.length === 0) {
              return;
            }
            let preview = '';
            if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf("mailto:") !== 0) {
              preview = `mailto:${preview}`;
            }
            const { tooltip } = that.quill.theme;
            tooltip.edit("link", preview);
          } else {
            that.quill.format("link", false);
          }
        }
      }
    },
    clipboard: {
      matchVisual: false
    }
  }), []);

  return (
    <div className="">
      <div className="">
        <ReactQuill
          theme="bubble"
          value={content}
          modules={module}
          placeholder="Write something amazing..."
          onChange={onChange}
          className={`${className}`}
        />
      </div>
    </div>
  );
};

Issue

• When I insert a link on the first or second line of the editor and then hover over it, the tooltip gets cut off at the top.

• However, if I insert the same link further down, the tooltip appears correctly.

This seems to be related to how Quill positions the tooltip relative to the editor bounds.

Changing the bounds property

<ReactQuill bounds={document.body} ... />

Overriding Tooltip CSS

.ql-tooltip {
  transform: translateY(10px) !important;
  max-height: none !important;
  overflow: visible !important;
}