Tooltips-Erweiterung

Weitere Informationen zur Tooltips-Erweiterung finden Sie im Artikel Tooltips for Gantt Elements.

Tooltip-Objekt

Auf das Tooltip-Objekt kann über gantt.ext.tooltips.tooltip zugegriffen werden. Es stellt Methoden zur Verfügung, um die Position, den Inhalt und die Sichtbarkeit des Tooltips zu steuern:

• getNode (): HTMLElement - gibt das HTML-Element des Tooltips zurück
• setViewport (node): object - beschränkt die Position des Tooltips auf die Grenzen eines angegebenen HTML-Elements
  • node - (HTMLElement) - das HTML-Element, innerhalb dessen der Tooltip begrenzt werden soll
• show (config, top): object - zeigt den Tooltip an den angegebenen Koordinaten (relativ zu document.body) an. Diese Methode akzeptiert verschiedene Parameter, abhängig von der gewünschten Position. Um den Tooltip an bestimmten Koordinaten anzuzeigen, geben Sie x- und y-Werte an. Um ihn an der Position eines Maus-Events anzuzeigen, übergeben Sie das Event-Objekt. Die Einstellungen für tooltip_offset_x/y und Viewport werden automatisch angewendet.
  • config? - (number | Event) - die x-Koordinate oder das Maus-Event-Objekt
  • top? - (number) - die y-Koordinate
• hide (): object - blendet den Tooltip aus
• setContent (html): object - setzt den HTML-Inhalt des Tooltips
  • html - (string) - HTML-String, der im Tooltip angezeigt wird

Methoden

Es stehen mehrere Methoden zur Verfügung, um das Verhalten des Tooltips beim Überfahren von DOM-Elementen mit der Maus zu steuern.

gantt.ext.tooltips.attach()

• attach (config): void - fügt einen Tooltip mit detaillierter Konfiguration hinzu. Diese Methode akzeptiert einen Parameter:
  • config - (object) - Konfigurationsobjekt für den Tooltip, einschließlich:
    • selector - (string) - CSS-Selector für die Elemente, auf denen Mausereignisse verfolgt werden sollen
    • onmouseenter - (Function): void - wird aufgerufen, wenn die Maus das Element betritt, mit folgenden Parametern:
      • event - (MouseEvent) - natives Maus-Event
      • node - (HTMLElement) - das Ziel-HTML-Element
    • onmousemove? - (Function): void - optional, wird aufgerufen, wenn sich die Maus im Element bewegt, mit folgenden Parametern:
      • event - (MouseEvent) - natives Maus-Event
      • node - (HTMLElement) - das Ziel-HTML-Element
    • onmouseleave - (Function): void - wird aufgerufen, wenn die Maus das Element verlässt, mit folgenden Parametern:
      • event - (MouseEvent) - natives Maus-Event
      • node - (HTMLElement) - das Ziel-HTML-Element
    • global? - (boolean) - optional, wenn true, werden Mausereignisse auf der gesamten Seite verfolgt; wenn false, nur innerhalb des Gantt-Elements. Standardmäßig false.

gantt.ext.tooltips.attach({
    selector: ".gantt_task_cell",
    onmouseenter: function (e, node) {
        const id = node.parentNode.attributes['task_id'].nodeValue;
        const task = gantt.getTask(id);

        if (typeof task.text == "string") {
            gantt.ext.tooltips.tooltip.setContent(task.text);
            gantt.ext.tooltips.tooltip.show(e.clientX + 20, e.clientY + 20)
        }
    },
    onmousemove: function (e, node) {
        gantt.ext.tooltips.tooltip.show(e.clientX + 20, e.clientY + 20)
    },
    onmouseleave: function (e, node) {
        gantt.ext.tooltips.tooltip.hide()
    },
})

gantt.ext.tooltips.tooltipFor()

• tooltipFor (config): void - fügt einem bestimmten Gantt-Element einen Tooltip hinzu. Dies ist eine vereinfachte Alternative zu attach(). Die Methode akzeptiert einen Parameter:
  • config - (object) - Konfigurationsobjekt, einschließlich:
    • selector - (string) - CSS-Selector für das Gantt-Element, an das der Tooltip angehängt werden soll
    • html - (Function): HTMLElement | string | number | void - eine Funktion, die den Tooltip-Inhalt zurückgibt. Sie erhält:
      • event - (Event) - natives Maus-Event
      • node - (HTMLElement) - das HTML-Element und gibt einen String mit dem Tooltip-Inhalt zurück
    • global? - (boolean) - optional, wenn true, wird auf der ganzen Seite gelauscht; wenn false, nur innerhalb des Gantt-Elements. Standardmäßig false.

gantt.ext.tooltips.tooltipFor({
    selector: ".gantt_task_cell",
    html: function (e, domElement) {
        const id = domElement.parentNode.attributes['task_id'].nodeValue;
        const task = gantt.getTask(id);
        return task.text;
    }
});

gantt.ext.tooltips.detach()

• detach (selector): void - entfernt den Tooltip für das angegebene Element. Die Methode nimmt einen Parameter entgegen:
  • selector - (string) - CSS-Selector des Gantt-Elements