Add birthdate tooltip

src/assets/css/default.css

@@ -272,3 +272,11 @@ button.item {
         display: flex;
     }
 }
+
+/**
+ * Icons
+ */
+i.small.small.small.icon,
+i.small.small.small.icons {
+    vertical-align: baseline;
+}

src/assets/js/default.js

@@ -10,7 +10,8 @@ if ('serviceWorker' in navigator) {
     })
 }
 
-const urlParams = new URLSearchParams(wishthis.$_GET);
+const urlParams  = new URLSearchParams(wishthis.$_GET);
+const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
 $(function() {
     /**
@@ -162,6 +163,17 @@ $(function() {
         $('.menu.sidebar').sidebar('show');
     });
 
+    /**
+     * Popups
+     */
+    popup_settings_default = {
+        'position'  : 'top center',
+        'variation' : isDarkMode ? '' : 'inverted',
+        'hoverable' : true,
+    };
+
+    $('[data-content]').popup(popup_settings_default);
+    $('[data-html]').popup(popup_settings_default);
 });
 
 /**

src/assets/js/home.js

@@ -1,19 +1,4 @@
 $(function() {
-    /**
-     * Popups
-     */
-    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-    /** Why wishthis? */
-    popup_settings_why_wishthis = {
-        'position'  : 'top center',
-        'variation' : isDarkMode ? '' : 'inverted',
-        'hoverable' : true,
-    };
-
-    $('[data-content]').popup(popup_settings_why_wishthis);
-    $('[data-html]').popup(popup_settings_why_wishthis);
-
     /**
      * Statistics
      */
@@ -114,8 +99,6 @@ function showStatistic(elementStatistic, amount, timeout, modified) {
     );
 
     /** Set Popup */
-    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
     $(elementStatistic).popup({
         'title'     : wishthis.strings.popup.last_modified,
         'content'   : modified,

src/assets/js/profile.js

@@ -1,6 +1,9 @@
 $(function() {
     $('.menu.profile .item').tab();
 
+    /**
+     * Personal
+     */
     $('.ui.calendar').calendar({
         type           : 'date',
         firstDayOfWeek : 1,
@@ -12,6 +15,10 @@ $(function() {
             'user-email' : 'email',
         }
     });
+
+    /**
+     * Password
+     */
     $('[data-tab="password"] .ui.form').form({
         fields: {
             'user-password'        : ['minLength[8]', 'empty'],

src/pages/profile.php

@@ -230,8 +230,11 @@ $page->navigation();
                                     <input type="email" name="user-email" value="<?= $_SESSION['user']->email ?>" />
                                 </div>
 
-                                <div class="field">
+                                <div class="field" data-content="<?= __('Used to suggest a wishlist called "Birthday", if it\'s coming up.') ?>">
-                                    <label><?= __('Birthdate') ?></label>
+                                    <label>
+                                        <?= __('Birthdate') ?>
+                                        <i class="ui small circular info icon"></i>
+                                    </label>
 
                                     <div class="ui calendar">
                                         <div class="ui input left icon">