diff --git a/airflow/www/static/css/main.css b/airflow/www/static/css/main.css
index b2816a12406de..f13f8d7bec320 100644
--- a/airflow/www/static/css/main.css
+++ b/airflow/www/static/css/main.css
@@ -105,6 +105,16 @@ span.skipped{
text-align:left !important;
font-size: 12px;
}
+
+.d3-tip {
+ background: black;
+ color: white;
+ border: solid;
+ border-width: 1px;
+ border-radius: 5px;
+ padding: 10px;
+}
+
input#execution_date {
margin-bottom: 0px;
}
diff --git a/airflow/www/static/js/graph.js b/airflow/www/static/js/graph.js
index 57ebb1e459c7a..327d55e553626 100644
--- a/airflow/www/static/js/graph.js
+++ b/airflow/www/static/js/graph.js
@@ -29,8 +29,7 @@ function update_nodes_states(task_instances) {
.parent().parent().parent().parent()
.attr("class", "node enter " + (ti.state ? ti.state : "no_status"))
.attr("data-toggle", "tooltip")
- .attr("data-original-title", function (d) {
- // Tooltip
+ .on("mouseover", function (d) {
const task = tasks[task_id];
let tt = "";
if(ti.task_id != undefined) {
@@ -44,8 +43,9 @@ function update_nodes_states(task_instances) {
tt += "Duration: " + escapeHtml(convertSecsToHumanReadable(ti.duration)) + "
";
tt += "Started: " + escapeHtml(ti.start_date) + "
";
tt += generateTooltipDateTime(ti.start_date, ti.end_date, dagTZ); // dagTZ has been defined in dag.html
- return tt;
- });
+ taskTip.show(tt, this); // taskTip is defined in graph.html
+ })
+ .on('mouseout', taskTip.hide);
});
}
diff --git a/airflow/www/templates/airflow/graph.html b/airflow/www/templates/airflow/graph.html
index 6e452a2e2cbd6..c51b88cd2818a 100644
--- a/airflow/www/templates/airflow/graph.html
+++ b/airflow/www/templates/airflow/graph.html
@@ -97,6 +97,7 @@
+
+
{% endblock %}