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.
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>
Sobald aktiviert, erscheinen Tooltips automatisch mit ihren Standardeinstellungen.
Standardmäßig zeigen Tooltips drei Eigenschaften einer Aufgabe an:
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;
};
Das Tooltip-Objekt, zugänglich als gantt.ext.tooltips.tooltip, bietet Methoden zur Verwaltung der Tooltip-Position, des Inhalts und der Sichtbarkeit:
document.body
an. Die Methode unterstützt:
Einige Methoden helfen, das Verhalten von Tooltips beim Überfahren von DOM-Elementen zu steuern.
Fügt einen Tooltip mit erweiterten Einstellungen hinzu. Akzeptiert ein Objekt mit den folgenden Konfigurationsoptionen:
Vereinfacht das Hinzufügen eines Tooltips zu einem bestimmten Gantt-Element. Akzeptiert ein Objekt mit:
Entfernt einen Tooltip. Erfordert:
Während Tooltips normalerweise an Gantt-Aufgaben gebunden sind, können Sie sie auch auf andere Elemente anwenden, wie zum Beispiel Ressourcenmarker:
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.
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)");
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
});
Sie können steuern, wie lange Tooltips benötigen, um zu erscheinen oder zu verschwinden:
gantt.config.tooltip_timeout = 50;
gantt.init("gantt_here");
gantt.config.tooltip_hide_timeout = 5000;
gantt.init("gantt_here");
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");
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