tiptap/docs/src/docPages/api/extensions/bubble-menu.md

Bubble Menu

This extension will make a contextual menu appear near a selection of text. Use it to let users apply marks to their text selection.

As always, the markup and styling is totally up to you. The menu is positioned absolute and requires a wrapper with position: relative, that’s basically the only requirement though.

Installation

# with npm
npm install @tiptap/extension-bubble-menu
# with Yarn
yarn add @tiptap/extension-bubble-menu

Settings

Option	Type	Default	Description
element	HTMLElement	null	The DOM element that contains your menu.
keepInBounds	Boolean	true	When enabled, it’s rendered inside the bounding box of the document.

Source code

packages/extension-bubble-menu/

Usage

JavaScript

import { Editor } from '@tiptap/core'
import BubbleMenu from '@tiptap/extension-bubble-menu'

new Editor({
  extensions: [
    BubbleMenu.configure({
      element: document.querySelector('.menu'),
    }),
  ],
})

Frameworks