Tooltips-Erweiterung

Weitere Informationen zur Tooltips-Erweiterung finden Sie im Artikel Tooltips für Gantt-Elemente.

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

Zurück nach oben