#38: adding tooltip for HTML labels

wrench-project · Nov 5, 2020 · 40e4eb6 · 40e4eb6
1 parent 37d857b
commit 40e4eb6
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 5 deletions.
diff --git a/web/_includes/partials/host_utilization_graph.html b/web/_includes/partials/host_utilization_graph.html
@@ -1,6 +1,14 @@
 <div class="ui fluid raised card" id="host-utilization-chart-card">
     <div class="content" id="host-utilization-chart-block">
-        <div class="header">Host Utilization</div>
+        <div class="header">
+            Host Utilization
+            {% if include.tooltip %}
+            <button class="ui circular grey icon button" data-tooltip="{{ include.tooltip }}" data-inverted=""
+                    style="font-size: 0.5em; top: -0.25em">
+                <i class="question icon"></i>
+            </button>
+            {% endif %}
+        </div>
     </div>
     <div class="content">
         <canvas id="{{ include.prefixID }}-host-utilization-chart"></canvas>

diff --git a/web/_includes/partials/network_bandwidth_usage_graph.html b/web/_includes/partials/network_bandwidth_usage_graph.html
@@ -1,6 +1,14 @@
 <div class="ui fluid raised card" id="network-bandwidth-chart-card">
     <div class="content" id="network-bandwidth-chart-block">
-        <div class="header">Network Bandwidth Usage</div>
+        <div class="header">
+            Network Bandwidth Usage
+            {% if include.tooltip %}
+            <button class="ui circular grey icon button" data-tooltip="{{ include.tooltip }}" data-inverted=""
+                    style="font-size: 0.5em; top: -0.25em">
+                <i class="question icon"></i>
+            </button>
+            {% endif %}
+        </div>
     </div>
     <div class="content">
         <canvas id="{{ include.prefixID }}-network-bandwidth-chart"></canvas>

diff --git a/web/_includes/partials/simulation_output.html b/web/_includes/partials/simulation_output.html
@@ -1,6 +1,14 @@
 <div class="ui fluid raised card" id="simulation-output-card">
     <div class="content" id="simulation-output-card-body">
-        <div class="header">Simulation Output</div>
+        <div class="header">
+            Simulation Output
+            {% if include.tooltip %}
+            <button class="ui circular grey icon button" data-tooltip="{{ include.tooltip }}" data-inverted=""
+                    style="font-size: 0.5em; top: -0.25em">
+                <i class="question icon"></i>
+            </button>
+            {% endif %}
+        </div>
     </div>
     <div class="content">
         <h6 class="card-subtitle mb-2 text-muted font-weight-light" id="simulation-parameters"></h6>

diff --git a/web/_includes/partials/workflow_execution_data.html b/web/_includes/partials/workflow_execution_data.html
@@ -1,6 +1,14 @@
 <div class="ui fluid raised card">
     <div class="content" id="task-details-card">
-        <div class="header">Task Data</div>
+        <div class="header">
+            Task Data
+            {% if include.tooltip %}
+            <button class="ui circular grey icon button" data-tooltip="{{ include.tooltip }}" data-inverted=""
+                    style="font-size: 0.5em; top: -0.25em">
+                <i class="question icon"></i>
+            </button>
+            {% endif %}
+        </div>
     </div>
     <div class="content">
         <table class="table table-hover text-muted" id="{{ include.prefixID }}-task-details-table"></table>

diff --git a/web/_includes/partials/workflow_execution_graph.html b/web/_includes/partials/workflow_execution_graph.html
@@ -1,6 +1,14 @@
 <div class="ui fluid raised card" id="workflow-execution-chart-card">
     <div class="content" id="chart-block">
-        <div class="header">Task Executions</div>
+        <div class="header">
+            Task Executions
+            {% if include.tooltip %}
+            <button class="ui circular grey icon button" data-tooltip="{{ include.tooltip }}" data-inverted=""
+                    style="font-size: 0.5em; top: -0.25em">
+                <i class="question icon"></i>
+            </button>
+            {% endif %}
+        </div>
     </div>
     <div class="content">
         <canvas id="{{ include.prefixID }}-graph-container"></canvas>