Added new interactive themes and CSS-only tooltips for enhanced user experience

README.md

@@ -86,15 +86,22 @@ If you have a different file structure, remember to update file path for CSS sty
 
 For now you can choose one of the animations listed below. Go to the [demo](http://lunarlogic.github.io/starability/) to see how they look.
 
-  - starability-basic
-  - starability-slot
-  - starability-grow
-  - starability-growRotate
-  - starability-fade
-  - starability-checkmark
-  - starability-heart
-  - starability-heartbeat
-  - starability-coinFlip (by [Paulina Materna](https://github.com/paulinamaterna))
+   - starability-basic
+   - starability-slot
+   - starability-grow
+   - starability-growRotate
+   - starability-fade
+   - starability-checkmark
+   - starability-heart
+   - starability-heartbeat
+   - starability-coinFlip (by [Paulina Materna](https://github.com/paulinamaterna))
+   - starability-glow (scale and glow effect on hover)
+   - starability-pulse (pulsing animation on hover)
+
+## Additional Features
+
+- **Tooltips**: Add `data-tooltip` attribute to labels for hover and focus tooltips.
+- **Enhanced Accessibility**: Improved focus styles and tooltips for keyboard users.
 
 ## Supported browsers
 

index.html

@@ -17,19 +17,19 @@ <h2>Rating example</h2>
       <input type="radio" id="no-rate" class="input-no-rate" name="rating" value="0" checked aria-label="No rating." />
 
       <input type="radio" id="rate1" name="rating" value="1" />
-      <label for="rate1">1 star.</label>
+      <label for="rate1" data-tooltip="Poor">1 star.</label>
 
       <input type="radio" id="rate2" name="rating" value="2" />
-      <label for="rate2">2 stars.</label>
+      <label for="rate2" data-tooltip="Fair">2 stars.</label>
 
       <input type="radio" id="rate3" name="rating" value="3" />
-      <label for="rate3">3 stars.</label>
+      <label for="rate3" data-tooltip="Good">3 stars.</label>
 
       <input type="radio" id="rate4" name="rating" value="4" />
-      <label for="rate4">4 stars.</label>
+      <label for="rate4" data-tooltip="Very Good">4 stars.</label>
 
       <input type="radio" id="rate5" name="rating" value="5" />
-      <label for="rate5">5 stars.</label>
+      <label for="rate5" data-tooltip="Excellent">5 stars.</label>
 
       <span class="starability-focus-ring"></span>
     </fieldset>

starability-scss/_starability-base.scss

@@ -88,6 +88,32 @@
       opacity: 0;
     }
 
+    &::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.8);
+      color: #fff;
+      padding: 5px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      white-space: nowrap;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s;
+      z-index: 10;
+    }
+
+    &:hover::after {
+      opacity: 1;
+    }
+
+    &:focus::after {
+      opacity: 1;
+    }
+
     @if ($hover-enabled) {
 
       // This function makes sure the right number of stars is highlighted

starability-scss/starability/all.scss

@@ -6,4 +6,6 @@
 @import 'checkmark';
 @import 'heart';
 @import 'heartbeat';
-@import 'coinFlip';
+@import 'coinFlip';
+@import 'glow';
+@import 'pulse';

starability-scss/starability/glow.scss

@@ -0,0 +1,23 @@
+@import '../variables';
+@import '../starability-base';
+@import '../starability-result';
+
+.starability-glow {
+  @include starability-base;
+
+  > label {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  @if ($hover-enabled) {
+    > input:not([disabled]):hover + label {
+      transform: scale(1.1);
+      box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
+    }
+
+    > input:not([disabled]):hover ~ label {
+      transform: scale(1.1);
+      box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
+    }
+  }
+}

starability-scss/starability/pulse.scss

@@ -0,0 +1,29 @@
+@import '../variables';
+@import '../starability-base';
+@import '../starability-result';
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.starability-pulse {
+  @include starability-base;
+
+  @if ($hover-enabled) {
+    > input:not([disabled]):hover + label {
+      animation: pulse 0.6s ease-in-out;
+    }
+
+    > input:not([disabled]):hover ~ label {
+      animation: pulse 0.6s ease-in-out;
+    }
+  }
+}