Tooltips für Gantt-Elemente

Tooltips sind praktisch, um Benutzern zusätzliche Details bereitzustellen, ohne den Bildschirm zu überladen. Standardmäßig sind Tooltips bereits für Gantt-Aufgaben eingerichtet.

Sie können auch Tooltips zu anderen Gantt-Elementen hinzufügen mithilfe der entsprechenden API.

Aktivierung

Um Tooltips für Aufgaben zu aktivieren, müssen Sie das tooltip Plugin aktivieren. Dies geschieht über die Methode gantt.plugins:

<script>
    gantt.plugins({         tooltip: true     });  
    gantt.init("gantt_here");
</script>

Related sample:  Tooltip

Sobald aktiviert, erscheinen Tooltips automatisch mit ihren Standardeinstellungen.

Benutzerdefinierter Text

Standardmäßig zeigen Tooltips drei Eigenschaften einer Aufgabe an:

  1. Startdatum der Aufgabe.
  2. Enddatum der Aufgabe.
  3. Name der Aufgabe.

Wenn Sie den Text anpassen möchten, verwenden Sie die Vorlage tooltip_text wie folgt:

gantt.templates.tooltip_text = function(start, end, task){
    return "<b>Aufgabe:</b> " + task.text + "<br/><b>Dauer:</b> " + task.duration;
};

Tooltip API

Tooltip-Objekt

Das Tooltip-Objekt, zugänglich als gantt.ext.tooltips.tooltip, bietet Methoden zur Verwaltung der Tooltip-Position, des Inhalts und der Sichtbarkeit:

  • getNode() - Ruft das HTML-Element des Tooltips ab.
  • setViewport() - Beschränkt die Tooltip-Position innerhalb eines bestimmten HTML-Elements:
    • node - (HTMLElement) Das Ziel-HTML-Element.
  • show() - Zeigt den Tooltip an spezifischen Koordinaten relativ zu document.body an. Die Methode unterstützt:
    • Spezifische Koordinaten:
      • left - (number) X-Koordinate.
      • top - (number) Y-Koordinate.
    • Mausereignis-Koordinaten (unter Berücksichtigung von tooltip_offset_x/y und Viewport):
      • event - (Event) Mausereignis-Objekt.
  • hide() - Verbirgt den Tooltip.
  • setContent() - Aktualisiert den HTML-Inhalt des Tooltips:
    • html - (string) HTML-Inhalt für den Tooltip.

Methoden

Einige Methoden helfen, das Verhalten von Tooltips beim Überfahren von DOM-Elementen zu steuern.

gantt.ext.tooltips.attach()

Fügt einen Tooltip mit erweiterten Einstellungen hinzu. Akzeptiert ein Objekt mit den folgenden Konfigurationsoptionen:

  • selector - (string) CSS-Selektor für Elemente, an die Tooltips angehängt werden sollen.
  • onmouseenter - (function) Wird ausgelöst, wenn die Maus das Element betritt:
    • event - (Event) Mausereignis-Objekt.
    • node - (HTMLElement) HTML-Element.
  • onmousemove - (function) Wird ausgelöst, wenn die Maus sich innerhalb des Elements bewegt:
    • event - (Event) Mausereignis-Objekt.
    • node - (HTMLElement) HTML-Element.
  • onmouseleave - (function) Wird ausgelöst, wenn die Maus das Element verlässt:
    • event - (Event) Mausereignis-Objekt.
    • node - (HTMLElement) HTML-Element.
  • global - (boolean) Bestimmt, ob Ereignisse auf der gesamten Seite (true) oder nur innerhalb des Gantt-Elements (false, Standard) verfolgt werden.

gantt.ext.tooltips.tooltipFor()

Vereinfacht das Hinzufügen eines Tooltips zu einem bestimmten Gantt-Element. Akzeptiert ein Objekt mit:

  • selector - (string) CSS-Selektor für das Gantt-Element.
  • html - (function) Tooltip-Vorlagenfunktion, die folgendes übernimmt:
    • event - (Event) Mausereignis-Objekt.
    • node - (HTMLElement) HTML-Element. und gibt eine Zeichenfolgenvorlage zurück.
  • global - (boolean) Optional, definiert, ob Ereignisse global (true) oder nur innerhalb des Gantt-Elements (false, Standard) verfolgt werden.

gantt.ext.tooltips.detach()

Entfernt einen Tooltip. Erfordert:

  • selector - (string) CSS-Selektor des Gantt-Elements.

Tooltips für verschiedene Elemente

Während Tooltips normalerweise an Gantt-Aufgaben gebunden sind, können Sie sie auch auf andere Elemente anwenden, wie zum Beispiel Ressourcenmarker:

Resource marker tooltip

Um dies zu tun, verwenden Sie die Tooltip-API, insbesondere:

Hier ist ein Beispiel für das Hinzufügen von Tooltips zu Zeitskalen-Zellen:

var domHelper = gantt.utils.dom;
var pos = domHelper.getRelativeEventPosition(event, gantt.$task_scale);
return gantt.templates.task_date(gantt.dateFromPos(pos.x));

Denken Sie daran, dass Sie gantt.ext.tooltips.tooltipFor() nur nach der Initialisierung von Gantt aufrufen sollten. Fügen Sie es beispielsweise in den onGanttReady Ereignishandler ein:

gantt.attachEvent("onGanttReady", function () {
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltipFor({
        selector: ".gantt_task_link",
        html: function (event, node) {
        ...
        }
        });
    gantt.init("gantt_here");
});

Related sample:  Custom Tooltips

Alternativ:

gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.ext.tooltips.tooltipFor({
    selector: ".gantt_task_cell",
    html: function (event, domElement) {
        var id = event.target.parentNode.attributes['task_id'].nodeValue;
        var task = gantt.getTask(id);
        return task.text;
    }
});

Related sample:  Gantt. Custom tooltips for cells

Auf diese Weise hinzugefügte Tooltips folgen dem Mauszeiger und berücksichtigen Einstellungen wie tooltip_offset_x, tooltip_offset_y, tooltip_timeout und tooltip_hide_timeout.

Diese Methode bietet mehr Kontrolle über das Verhalten von Tooltips mit erweiterten Konfigurationsoptionen.

Anpassung des Tooltip-Verhaltens

Sie können das Verhalten von Tooltips anpassen, indem Sie den Standard-Handler entfernen und einen benutzerdefinierten definieren:

gantt.ext.tooltips.detach("["+gantt.config.task_attribute+"]:not(.gantt_task_row)");
  • Richten Sie dann ein benutzerdefiniertes Verhalten über gantt.ext.tooltips.attach() ein. Zum Beispiel, um Tooltips nur über der Tabelle anzuzeigen:
gantt.ext.tooltips.tooltipFor({
  selector: ".gantt_grid ["+gantt.config.task_attribute+"]",
  html: (event: MouseEvent) => {
     if (gantt.config.touch && !gantt.config.touch_tooltip) {
     return;
   }
 
   const targetTaskId = gantt.locate(event);
   if(gantt.isTaskExists(targetTaskId)){
     const task = gantt.getTask(targetTaskId);
     return gantt.templates.tooltip_text(task.start_date, task.end_date, task);
   }
   return null;
  },
  global: false
});

Timeout

Sie können steuern, wie lange Tooltips benötigen, um zu erscheinen oder zu verschwinden:

  • Um die Verzögerung vor dem Anzeigen eines Tooltips festzulegen, verwenden Sie tooltip_timeout:
gantt.config.tooltip_timeout = 50;
gantt.init("gantt_here");
  • Um anzupassen, wie lange ein Tooltip nach der Mausbewegung sichtbar bleibt, verwenden Sie tooltip_hide_timeout:
gantt.config.tooltip_hide_timeout = 5000;
gantt.init("gantt_here");

Position

Die Position des Tooltips kann mit diesen Offsets feinjustiert werden:

gantt.config.tooltip_offset_x = 30;
gantt.config.tooltip_offset_y = 40;
 
gantt.init("gantt_here");

Anzeigebereich

Ab Version 6.1 sind Tooltips nicht mehr auf den Zeitleistenbereich beschränkt und folgen dem Mauszeiger. Wenn Sie das ältere Verhalten bevorzugen, können Sie es zurücksetzen:

gantt.attachEvent("onGanttReady", function(){
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltip.setViewport(gantt.$task_data);
});
 
gantt.init("gantt_here");
gantt.parse(demo_tasks);
Zurück nach oben