tessl/npm-codemirror--view

DOM view component for the CodeMirror code editor

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Tooltips

Name: tessl/npm-codemirror--view
Author: tessl

The tooltip system provides contextual information display with positioning, hover support, and custom content rendering.

Core Tooltip Interface

interface Tooltip {
  pos: number;
  end?: number;
  create(view: EditorView): TooltipView;
  above?: boolean;
  strictSide?: boolean;
  arrow?: boolean;
}

TooltipView Interface

interface TooltipView {
  dom: HTMLElement;
  update?(update: ViewUpdate): void;
  destroy?(): void;
  mount?(view: EditorView): void;
  positioned?(): void;
  overlap?: boolean;
  resize?: boolean;
}

Tooltip Functions

const showTooltip: Facet<Tooltip | null>;

function tooltips(config?: TooltipConfig): Extension;
function hoverTooltip(source: HoverTooltipSource, options?: HoverTooltipOptions): Extension;
function getTooltip(view: EditorView, tooltip: Tooltip): TooltipView | null;
function hasHoverTooltips(state: EditorState): boolean;
function closeHoverTooltips(view: EditorView): boolean;
function repositionTooltips(view: EditorView): void;

type HoverTooltipSource = (view: EditorView, pos: number, side: -1 | 1) => Tooltip | null | Promise<Tooltip | null>;

Usage Examples

Basic Tooltip

import { showTooltip, EditorView } from "@codemirror/view";

const simpleTooltip = showTooltip.of({
  pos: 100,
  above: true,
  create() {
    const dom = document.createElement("div");
    dom.className = "cm-tooltip";
    dom.textContent = "This is a tooltip";
    return { dom };
  }
});

Hover Tooltips

const docTooltip = hoverTooltip((view, pos, side) => {
  const word = view.state.wordAt(pos);
  if (!word) return null;
  
  const definition = getDefinition(word.text);
  if (!definition) return null;
  
  return {
    pos: word.from,
    end: word.to,
    above: true,
    create() {
      const dom = document.createElement("div");
      dom.className = "documentation-tooltip";
      dom.innerHTML = `<strong>${word.text}</strong><br>${definition}`;
      return { dom };
    }
  };
});