Skip to content

BlockNote ShadCN popovers/tooltips render with incorrect positioning #2767

@Bjoniii

Description

@Bjoniii

What’s broken?

Hi

When i hover on the tooltip or open the popover link the position is weird and far up
Am i doing something wrong with the setup i followed the shadcn setup https://www.blocknotejs.org/docs/getting-started/shadcn
Image

Image

i did
yarn add @blocknote/core @blocknote/react @blocknote/shadcn
created a file Editor.tsx
`import '@blocknote/shadcn/style.css';

import { useCreateBlockNote } from '@blocknote/react';
import { BlockNoteView } from '@blocknote/shadcn';

interface EditorProps {
onChange?: (val: string) => void;
initialContent?: string;
editable?: boolean;
}

export const Editor = ({ onChange, editable, initialContent }: EditorProps) => {
const editor = useCreateBlockNote({
initialContent: initialContent ? JSON.parse(initialContent) : undefined,
});

return (
<BlockNoteView
editor={editor}
editable={editable}
theme="light"
onChange={() => onChange?.(JSON.stringify(editor.document))}
/>
);
};
im on"tailwindcss": "3.2.7",`

What did you expect to happen?

I expect to work like the docs for shadcn say https://www.blocknotejs.org/docs/getting-started/shadcn

Image

Steps to reproduce

No response

BlockNote version

No response

Environment

No response

Additional context

No response

Contribution

  • I'd be interested in contributing a fix for this issue

Sponsor

  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-triageIssue has not yet been reviewed or classified by maintainers.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions