Tooltips

If you’re every finding yourself needing to place an element at the editor’s cursor, the addTooltip() utility can help. This utility is used by autoComplete() to position the completions. Note that the cursorPosition() extension is required before the tooltip can be shown.

Example

The editor below shows how to use addTooltip() to add a tooltip telling a user they cannot edit a read-only editor. Try typing in the editor below.

import { addTooltip } from "prism-code-editor/tooltips"

import { addTooltip } from "prism-code-editor/tooltips"

const tooltip = document.createElement("div")

tooltip.className = "my-tooltip"

tooltip.textContent = "Cannot edit read-only editor."

const [show, hide] = addTooltip(editor, tooltip, false)

// Showing the tooltip when the user tries to type

// This event listener must use capture

editor.textarea.addEventListener("beforeinput", () => show(), true)

// Hiding the tooltip when a user moves the cursor or clicks on the textarea

editor.on("selectionChange", hide)

editor.textarea.addEventListener("click", hide)

The following styles are added to the tooltip:

.my-tooltip {

.my-tooltip {

position: sticky;

left: 0.5em;

right: 0.5em;

padding: 0.4em;

background: var(--widget__bg);

border: 1px solid var(--widget__border);

border-radius: 0.3em;

font-family: Arial, Helvetica, sans-serif;

white-space: normal;

word-break: normal;

}