Tooltips-Erweiterung

Für weitere Informationen über die Tooltips-Erweiterung, lesen Sie den Artikel unter Tooltips für Gantt-Elemente.

Tooltip-Objekt

Auf das Tooltip-Objekt kann über gantt.ext.tooltips.tooltip zugegriffen werden. Dies bietet Methoden zur Steuerung der Position, des Inhalts und der Sichtbarkeit des Tooltips:

• getNode (): HTMLElement - ruft das HTML-Element ab, das das Tooltip darstellt.
• setViewport (node): object - beschränkt die Position des Tooltips innerhalb der Grenzen eines bestimmten HTML-Elements.
  • node - (HTMLElement) - das Ziel-HTML-Element.
• show (config, top): object - macht das Tooltip an spezifischen Koordinaten relativ zu document.body sichtbar. Sie können entweder x, y Koordinaten oder ein Event-Objekt angeben, um es an der Mausereignisposition zu platzieren. Die Offset- und Viewport-Einstellungen des Tooltips werden angewendet.
  • config? - (number | Event) - entweder die X-Koordinate oder ein Mausereignisobjekt.
  • top? - (number) - die Y-Koordinate.
• hide (): object - verbirgt das Tooltip.
• setContent (html): object - aktualisiert den Inhalt des Tooltips mit dem bereitgestellten HTML-String:
  • html - (string) - der HTML-Inhalt, der im Tooltip angezeigt werden soll.

Methoden

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

gantt.ext.tooltips.attach()

• attach (config): void - fügt ein Tooltip mit erweiterten Konfigurationsoptionen hinzu. Akzeptiert einen einzelnen Parameter:
  • config - (object) - ein Objekt, das Tooltip-Einstellungen enthält:
    • selector - (string) - ein CSS-Selektor für die Elemente, die Mausereignisse auslösen sollen.
    • onmouseenter - (Function): void - eine Funktion, die ausgelöst wird, wenn die Maus ein Element betritt. Parameter:
      • event - (MouseEvent) - das native Mausereignis.
      • node - (HTMLElement) - das Ziel-HTML-Element.
    • onmousemove? - (Function): void - optional, eine Funktion, die ausgelöst wird, wenn die Maus sich innerhalb des Elements bewegt. Parameter:
      • event - (MouseEvent) - das native Mausereignis.
      • node - (HTMLElement) - das Ziel-HTML-Element.
    • onmouseleave - (Function): void - eine Funktion, die ausgelöst wird, wenn die Maus das Element verlässt. Parameter:
      • event - (MouseEvent) - das native Mausereignis.
      • node - (HTMLElement) - das Ziel-HTML-Element.
    • global? - (boolean) - optional, gibt an, ob das Modul Mausereignisse auf der gesamten Seite (true) oder nur innerhalb des Gantt-Elements (false) überwachen soll. 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 ein Tooltip hinzu. Dies ist eine einfachere Alternative zur attach()-Methode. Akzeptiert einen Parameter:
  • config - (object) - ein Objekt mit Tooltip-Konfiguration:
    • selector - (string) - ein CSS-Selektor für das Gantt-Element, an das das Tooltip angefügt werden soll.
    • html - (Function): HTMLElement | string | number | void - eine Vorlagenfunktion für den Tooltip-Inhalt. Die Funktion nimmt zwei Parameter an:
      • event - (Event) - das native Mausereignis.
      • node - (HTMLElement) - das Ziel-HTML-Element. Die Funktion sollte einen String zurückgeben, der den Inhalt des Tooltips enthält.
    • global? - (boolean) - optional, gibt an, ob das Modul Mausereignisse auf der gesamten Seite (true) oder nur innerhalb des Gantt-Elements (false) überwachen soll. 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 ein Tooltip. Die Methode erfordert einen Parameter:
  • selector - (string) - der CSS-Selektor des Gantt-Elements, von dem das Tooltip entfernt werden soll.

Zurück nach oben