Add data and tooltips to student.details

1 files changed, 51 insertions, 0 deletions

diff --git a/ustayml/static/style.css b/ustayml/static/style.css
index 71ffd97..0357f46 100644
--- a/ustayml/static/style.css
+++ b/ustayml/static/style.css
@@ -97,6 +97,8 @@ header .action {
   padding: 0 1rem 1rem;
 }
 
+/* header */
+
 .content > header {
   border-bottom: 1px solid lightgray;
   /* display: flex;
@@ -118,6 +120,40 @@ header .action {
   align-items: flex-end;
 }
 
+/* tooltip */
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width:max-content;
+  min-width: 10rem;
+  max-width: 60rem;
+  /* white-space: nowrap; */
+  background-color: rgba(255, 255, 224, 0.9);
+  color: black;
+  text-align: left;
+  border: 1px solid darkgoldenrod;
+  /* border-radius: 6px; */
+  padding: 0 0.2em;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 100%;
+  margin-left: -5rem;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+/* flash */
 
 .flash {
   margin: 1em 0;
@@ -280,3 +316,18 @@ input[type="submit"] {
   align-self: start;
   min-width: 10em;
 }
+
+/* text status styles */
+
+.text-high-risk {
+  color: red;
+  background-color: rgba(255, 0, 0, .2);
+}
+
+.text-medium-risk {
+  color: orange;
+}
+
+.text-low-risk {
+  color: green;
+}
\ No newline at end of file