I’m using ReactQuill to render textboxes on a whiteboard (created using TLDraw).
The toolbar needs to appear on top of all the shapes on the whiteboard and so its created as a top level component.

The quill editor is created inside the shapes and so is much deeper in the stack. The problem is that the “ql-tooltip” element is created with the quill editor element and so always appears under the toolbar.

Is there a way to re-create the tooltip element with the higher level toolbar?

What I tried:

Create a custom link and tooltip component as follows:

const SlideCanvasToolbar = () => {
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);

  const toggleTooltip = () => setIsTooltipVisible(!isTooltipVisible);

    return (
      <div>
        <CustomLinkTooltip
          isVisible={isTooltipVisible}
          onClose={() => setIsTooltipVisible(false)}
        />
        <div
          id={`toolbar_${cleanId}`}
          onClick={event => event.stopPropagation()}
        >
          <button className="ql-bold"></button>
          <button className="ql-italic"></button>
          <button className="ql-underline"></button>
          <button className="ql-strike"></button>
          <button className="ql-custom-link" onClick={toggleTooltip}>
            L
          </button>
        </div>
      </div>
    );
};

While this shows the tooltip on top. I still can’t get the link formatting to show when a link is created. With this approach, I’ll also have to re-create the edit/remove functionality. When I tried adding a handler to the ReactQuill component, the editor text becomes empty (and there’s no console error):

<div
  ref={wrapperRef}
  style={{ pointerEvents: 'all', overflow: 'visible' }}
  tabIndex={0}
  data-text-editor={`ql_container_${cleanId}`}
>
  <ReactQuill
    value={rawHtmlContent}
    theme="snow"
    bounds={`[data-text-editor=ql_container_${cleanId}]`}
    ref={quillRef}
    modules={{
      toolbar: {
        container: `#toolbar_${cleanId}`,
        handlers: {
          'custom-link': function (value: string) {
            const editor = quillRef.current?.getEditor();
            if (!editor) return;
            console.log('custom-link clicked', value);
          },
        },
      },
    }}
  />
</div>