tooltip update

Author: drunkbad

newaccountstyles.css

@@ -56,53 +56,84 @@ select:focus {
   box-shadow  : 0 0 5px rgba(0, 138, 173, 0.4);
 }
 
-/* Tooltip Styling */
+/* Dotted Underline for Labels with Tooltips */
+.tooltip-container {
+  position      : relative;
+  display       : inline-flex;
+  align-items   : center;
+  border-bottom : 1px dotted #008aad;
+  /* Dotted underline */
+  padding-bottom: 2px;
+  /* Adjust underline positioning */
+  cursor        : help;
+  color         : #333;
+  transition    : border-color 0.3s;
+}
+
+/* Tooltip Icon Styling */
 .tooltip-icon {
-  margin-left: 5px;
   font-size  : 0.9em;
-  color      : #6c757d;
+  color      : #008aad;
+  /* Icon color to match the dotted underline */
+  margin-left: 5px;
+  /* Spacing between text and icon */
   cursor     : pointer;
+  transition : color 0.3s;
 }
 
-.tooltip-container {
-  position: relative;
+.tooltip-container:hover {
+  border-bottom-color: #005f6b;
+  /* Darker color on hover */
 }
 
-.tooltip-container:hover .tooltiptext {
-  visibility: visible;
-  opacity   : 1;
+.tooltip-container:hover .tooltip-icon {
+  color: #005f6b;
+  /* Darken icon color on hover */
 }
 
-.tooltiptext {
+/* Modern Tooltip Styling */
+.tooltip-container .tooltiptext {
   visibility      : hidden;
-  width           : 220px;
-  background-color: #333;
+  width           : 240px;
+  background-color: rgba(51, 51, 51, 0.95);
   color           : #fff;
-  text-align      : center;
-  border-radius   : 5px;
-  padding         : 5px;
+  text-align      : left;
+  border-radius   : 8px;
+  padding         : 10px;
   position        : absolute;
-  z-index         : 1;
-  bottom          : 125%;
-  /* Position above the text */
+  z-index         : 10;
+  bottom          : 150%;
+  /* Position above the label */
   left            : 50%;
-  margin-left     : -110px;
+  margin-left     : -120px;
   opacity         : 0;
-  transition      : opacity 0.3s;
+  transform       : scale(0.95);
+  box-shadow      : 0px 8px 16px rgba(0, 0, 0, 0.3);
+  font-size       : 0.95em;
+  transition      : opacity 0.3s, transform 0.3s;
+}
+
+.tooltip-container:hover .tooltiptext {
+  visibility: visible;
+  opacity   : 1;
+  transform : scale(1);
 }
 
 .tooltiptext::after {
   content     : "";
   position    : absolute;
   top         : 100%;
+  /* Position arrow at the bottom of the tooltip */
   left        : 50%;
   margin-left : -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: #333 transparent transparent transparent;
+  border-color: rgba(51, 51, 51, 0.95) transparent transparent transparent;
 }
 
-/* Button Styling */
+
+
+/* ----------Button Styling------------- */
 .btn-submit {
   background-color: #008aad;
   color           : #fff;
@@ -125,43 +156,4 @@ select:focus {
   color     : #e74c3c;
   font-size : 0.9em;
   margin-top: 5px;
-}
-
-/* Tooltip container */
-.tooltip-container {
-  position: relative;
-}
-
-.tooltiptext {
-  visibility      : hidden;
-  width           : 220px;
-  background-color: #333;
-  color           : #fff;
-  text-align      : center;
-  border-radius   : 5px;
-  padding         : 5px;
-  position        : absolute;
-  z-index         : 1;
-  bottom          : 125%;
-  /* Position above the text */
-  left            : 50%;
-  margin-left     : -110px;
-  opacity         : 0;
-  transition      : opacity 0.3s;
-}
-
-.tooltip-container:hover .tooltiptext {
-  visibility: visible;
-  opacity   : 1;
-}
-
-.tooltiptext::after {
-  content     : "";
-  position    : absolute;
-  top         : 100%;
-  left        : 50%;
-  margin-left : -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #333 transparent transparent transparent;
 }