Merge pull request #81 from ping-browser/nikhil/ntp

resolved tooltip's visibility in parental control popup
ping-browser · Sep 25, 2024 · dde3418 · dde3418
2 parents 73ff2e6 + fd01b95
commit dde3418
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/components/parental_control/extension/content/ui/popup.css b/components/parental_control/extension/content/ui/popup.css
@@ -193,12 +193,12 @@ button {
   cursor: pointer;
 }
 
-.tooltip {
+.checkboxTooltip {
   position: relative;
   display: inline-block;
 }
 
-.tooltip .tooltiptext {
+.checkboxTooltip .tooltiptext {
   width: 195px;
   height: 56px;
   min-height: fit-content;
@@ -213,14 +213,14 @@ button {
   padding: 8px;
   position: absolute;
   z-index: 1;
-  top: 115%; /* Position the tooltip above the element */
+  top: 115%;
   left: 35%;
   margin-left: -50px;
   opacity: 0;
   transition: opacity 0.3s;
 }
 
-.tooltip:hover .tooltiptext {
+.checkboxTooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
 }
diff --git a/components/parental_control/extension/content/ui/popup.html b/components/parental_control/extension/content/ui/popup.html
@@ -37,12 +37,12 @@
             <span id="resetPasswordLink">Reset password</span>
           </div>
           <div style="display: flex; flex-direction: column; margin-bottom: 10px; margin-top: 15px;">
-            <div class="checkbox-container tooltip">
+            <div class="checkbox-container checkboxTooltip">
               <input type="checkbox" id="blockGamesCheckbox" style="margin: 5px;">
               <label class="checkbox-label" for="blockGamesCheckbox">Block games</label>
               <span class="tooltiptext">Foster productivity and creativity by minimizing gaming</span>
             </div>
-            <div class="checkbox-container tooltip">
+            <div class="checkbox-container checkboxTooltip">
               <input type="checkbox" id="blockSocialMediaCheckbox" style="margin: 5px;">
               <label class="checkbox-label" for="blockSocialMediaCheckbox">Block social media</label>
               <span class="tooltiptext">Encourage productive screen time by blocking social media sites.</span>