Skip to content

addTooltip

addTooltip(editor, element, fixedWidth): [ShowTooltip, HideTooltip]

Defined in: tooltips.ts:41

Utility making it easy to add tooltips positioned on the editor’s cursor. Before you can show the tooltip, a cursorPosition extension must be added to the editor.

This works by appending your tooltip to a flex container. You can style this container with the selector .pce-tooltip if needed. This container is then added to the editor’s overlays. It also has overflow-x: clip to prevent your tooltip from overflowing in browsers that support it.

If you want your tooltip to always be visible when scrolling horizontally, you can add position: sticky along with the right and left CSS properties to it.

PrismEditor

Editor you want to add the tooltip to.

HTMLElement

Element for the tooltip.

boolean = true

If false, the tooltip will shrink instead of getting offset to the left if there’s not enough space to the right of the cursor. Defaults to true.

[ShowTooltip, HideTooltip]

Show and hide functions.

const [show, hide] = addTooltip(editor, element)