Pārlūkot izejas kodu

add hover labels for select list label

Aneimytis 3 gadi atpakaļ
vecāks
revīzija
4a09e311f8
2 mainītis faili ar 11 papildinājumiem un 3 dzēšanām
  1. 10 2
      Extensions/combined/popup.css
  2. 1 1
      Extensions/combined/popup.html

+ 10 - 2
Extensions/combined/popup.css

@@ -68,7 +68,7 @@ button:hover {
   border-radius: 0.25rem;
 }
 
-.switch:before {
+.switch:before, .label-with-hover-tip:before {
   content: attr(data-hover);
   visibility: hidden;
   opacity: 0;
@@ -84,7 +84,7 @@ button:hover {
   top: 160%;
 }
 
-.switch:hover:before {
+.switch:hover:before, .label-with-hover-tip:hover:before {
   visibility: visible;
   opacity: 1;
 }
@@ -188,6 +188,14 @@ button:hover {
   margin-bottom: 1rem;
 }
 
+.label-with-hover-tip {
+  position: relative;
+  display: inline-block;
+  width: 80px;
+  height: 17px;
+  margin-bottom: 1rem;
+}
+
 .switch:last-of-type {
   margin-bottom: 0;
 }

+ 1 - 1
Extensions/combined/popup.html

@@ -137,7 +137,7 @@
   </label>
   <br/>
   <div class="custom-select">
-    <label for="color_theme">Color theme:</label>
+    <label for="color_theme" class="label-with-hover-tip" data-hover="">Color theme:</label>
     <select name="color_theme" id="color_theme">
       <option value="classic" id="color_theme_classic">Classic</option>
       <option value="accessible" id="color_theme_accessible">