From 60d78c841713ff13dbe98eff94b1189748730f87 Mon Sep 17 00:00:00 2001
From: "Pagacz, Konrad {FIEV~Warsaw}" <konrad.pagacz@contractors.roche.com>
Date: Thu, 1 Jul 2021 15:15:34 +0200
Subject: [PATCH] feat(tool tips): added the CSS styling for tool tips

Related to NEST/teal.modules.general#1216
---
 NEWS.md               |  1 +
 inst/css/tooltips.css | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 inst/css/tooltips.css

diff --git a/NEWS.md b/NEWS.md
index 04d9d63d79..64d686e11c 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -6,6 +6,7 @@
 * Changed the displayed format of the data name and the column name in `data_extract_spec` UI elements. Both are now compressed to `<data name>.<column name>` if they don't change during runtime of the app.
 * Added `ADSAFTTE` to the list of recognized ADaM dataset names.
 * Added another example to `data_extract_spec`'s doc string showcasing app users can choose a variable used for filtering in the encoding panel.
+* Added CSS styling to tool tips in teal modules.
 
 ### Bug fixes
 * Fixed an edge case error when creating a filter on variable with all missing values crashed the app.
diff --git a/inst/css/tooltips.css b/inst/css/tooltips.css
new file mode 100644
index 0000000000..1b1629b87f
--- /dev/null
+++ b/inst/css/tooltips.css
@@ -0,0 +1,32 @@
+/* Tooltip container */
+.teal-tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+/* Tooltip text */
+.teal-tooltip .tooltiptext {
+  visibility: hidden;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 10px;
+  border-radius: 6px;
+  opacity: 0;
+
+  z-index: 10;
+  position: absolute;
+  width: 400px;
+  left: 100%;
+  top: -5px;
+
+  transition: all 0s ease 0s;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.teal-tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.3s ease 0.4s;
+}