feat(tool tips): added the CSS styling for tool tips

Related to NEST/teal.modules.general#1216

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.

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;
+}