Tooltip on configuration menu

lib/Vroom/I18N/en.pm

@@ -126,7 +126,7 @@ our %Lexicon = (
   "ADD_NOTIFICATION"                     => "Add a notification",
   "ADD_THIS_ADDRESS"                     => "Add this address",
   "REMOVE_THIS_ADDRESS"                  => "Remove this address",
-  "NOTIFICATION_ON_JOIN"                 => "Email addresses to notify when someone joins this room",
+  "NOTIFICATION_ON_JOIN"                 => "Notification when someone joins this room",
   "s_WILL_BE_NOTIFIED"                   => "%s will receive a notification each time someone joins this room",
   "s_WONT_BE_NOTIFIED_ANYMORE"           => "%s won't be notified anymore",
   "ROOM_CONFIG_UPDATED"                  => "Room configuration has been updated",
@@ -157,6 +157,15 @@ our %Lexicon = (
   "JOIN_PASSWORD"                        => "Password to join the room",
   "OWNER_PASSWORD"                       => "Password to manage the room",
   "PERSISTENT"                           => "Persistent",
+  "TOOLTIP_LOCK_ROOM"                    => "Once this option is enabled, no one else can join the room. " .
+                                            "Only enable it after every participant is here. This way, nobody will be able to disturb " .
+                                            "your meeting",
+  "TOOLTIP_ASK_FOR_NAME"                 => "Everyone will be be asked for their name before they can join the room",
+  "TOOLTIP_PASSWORD_PROTECT"             => "This password will be needed to join the room",
+  "TOOLTIP_RESERVE_THIS_ROOM"            => "If this password is set, you'll be able to access the configuration menus ",
+                                            "next time you connect",
+  "TOOLTIP_PERSISTENT"                   => "The room will be persistent (kept forever)",
+  "TOOLTIP_NOTIFICATION_ON_JOIN"         => "One or more email addresse(s) which will be notified when someone joins the room",
   "ROOM_NOW_PERSISTENT"                  => "This room is now persistent",
   "ROOM_NO_MORE_PERSISTENT"              => "This rooms isn't persistent anymore",
   "EMAIL_INVITE"                         => "Email invitation",

lib/Vroom/I18N/fr.pm

@@ -132,7 +132,7 @@ our %Lexicon = (
     "ADD_NOTIFICATION"                          => "Ajouter une notification",
     "ADD_THIS_ADDRESS"                          => "Ajouter cette adresse",
     "REMOVE_THIS_ADDRESS"                       => "Supprimer cette adresse",
-    "NOTIFICATION_ON_JOIN"                      => "Email à notifier lorsque quelqu'un rejoint ce salon",
+    "NOTIFICATION_ON_JOIN"                      => "Notification lorsque quelqu'un rejoint ce salon",
     "s_WILL_BE_NOTIFIED"                        => "%s recevra une notification à chaque fois qu'une personne rejoint ce salon",
     "s_WONT_BE_NOTIFIED_ANYMORE"                => "%s ne recevra plus les notifications pour ce salon",
     "ROOM_CONFIG_UPDATED"                       => "La configuration du salon a été mise à jour",
@@ -163,6 +163,15 @@ our %Lexicon = (
     "JOIN_PASSWORD"                             => "Mot de passe d'accès au salon",
     "OWNER_PASSWORD"                            => "Mot de passe de gestionnaire",
     "PERSISTENT"                                => "Persistant",
+    "TOOLTIP_LOCK_ROOM"                         => "Une fois cette option activée, plus personne ne peut rejoindre le salon. " .
+                                                   "À n'activer qu'une fois que tout les participants vous ont rejoint, pour éviter " .
+                                                   "que d'autres personnes viennent troubler la réunion",
+    "TOOLTIP_ASK_FOR_NAME"                      => "Les participants devront saisir leur nom avant de pouvoir rejoindre le salon",
+    "TOOLTIP_PASSWORD_PROTECT"                  => "Ce mot de passe sera nécessaire pour rejoindre le salon",
+    "TOOLTIP_RESERVE_THIS_ROOM"                 => "Ce mot de passe vous permettra de récuperer l'accès aux " .
+                                                   "menus de gestion la prochaine fois que vous vous connecterez",
+    "TOOLTIP_PERSISTENT"                        => "Rend le salon persistant (sera conservé indéfiniement)",
+    "TOOLTIP_NOTIFICATION_ON_JOIN"              => "Une ou plusieurs adresses email qui recevront une notification dès que quulqu'un rejoint ce salon",
     "ROOM_NOW_PERSISTENT"                       => "Ce salon est maintenant persistant",
     "ROOM_NO_MORE_PERSISTENT"                   => "Ce salon n'est plus persistant",
     "EMAIL_INVITE"                              => "Invitation par email",

public/js/vroom.js

@@ -8,7 +8,15 @@ Daniel Berteaud <daniel@firewall-services.com>
 // Default notifications
 $.notify.defaults( { globalPosition: 'bottom left' } );
 // Enable tooltip on required elements
-$('.help').tooltip({container: 'body', trigger: 'hover'});
+$('.help').tooltip({
+  container: 'body',
+  trigger: 'hover'
+});
+$('.popup').popover({
+  container: 'body',
+  placement: 'right',
+  trigger: 'focus'
+});
 $('.modal').on('show.bs.modal', function(){
   $('.help').tooltip('hide');
 });

templates/default/configure_modal.html.ep

@@ -14,6 +14,10 @@
               <div class="form-group">
                 <label class="col-sm-4 control-label" for="lockedSet">
                   <%=l 'LOCK_ROOM' %>
+                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%=l 'TOOLTIP_LOCK_ROOM' %>">
+                    <span class="glyphicon glyphicon-question-sign">
+                    </span>
+                  </a>
                 </label>
                 <div class="col-sm-8">
                   <input type="checkbox" class="bs-switch" id="lockedSet">
@@ -22,6 +26,10 @@
               <div class="form-group">
                 <label class="col-sm-4 control-label" for="askForNameSet">
                   <%=l 'ASK_FOR_NAME' %>
+                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%=l 'TOOLTIP_ASK_FOR_NAME' %>">
+                    <span class="glyphicon glyphicon-question-sign">
+                    </span>
+                  </a>
                 </label>
                 <div class="col-sm-8">
                   <input type="checkbox" class="bs-switch" id="askForNameSet">
@@ -30,6 +38,10 @@
               <div class="form-group">
                 <label class="col-sm-4 control-label" for="joinPassSet">
                   <%=l 'PASSWORD_PROTECT' %>
+                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%=l 'TOOLTIP_PASSWORD_PROTECT' %>">
+                    <span class="glyphicon glyphicon-question-sign">
+                    </span>
+                  </a>
                 </label>
                 <div class="col-sm-8">
                   <input type="checkbox" class="bs-switch" id="joinPassSet">
@@ -52,6 +64,10 @@
               <div class="form-group">
                 <label class="col-sm-4 control-label" for="ownerPassSet">
                   <%=l 'RESERVE_THIS_ROOM' %>
+                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%=l 'TOOLTIP_RESERVE_THIS_ROOM' %>">
+                    <span class="glyphicon glyphicon-question-sign">
+                    </span>
+                  </a>
                 </label>
                 <div class="col-sm-8">
                   <input type="checkbox" class="bs-switch" id="ownerPassSet">
@@ -75,6 +91,10 @@
               <div class="form-group">
                 <label class="col-sm-4 control-label" for="persistentSet">
                   <%=l 'PERSISTENT' %>
+                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-content="<%=l 'TOOLTIP_PERSISTENT' %>">
+                    <span class="glyphicon glyphicon-question-sign">
+                    </span>
+                  </a>
                 </label>
                 <div class="col-sm-8">
                   <input type="checkbox" class="bs-switch" id="persistentSet">
@@ -84,9 +104,13 @@
               <div class="form-group">
                 <label class="col-sm-4 control-label" for="emailNotifications">
                   <%=l 'NOTIFICATION_ON_JOIN' %>
+                  <a href="#" class="popup" data-container="body" data-toggle="popover" data-placement="left" data-content="<%=l 'TOOLTIP_NOTIFICATION_ON_JOIN' %>">
+                    <span class="glyphicon glyphicon-question-sign">
+                    </span>
+                  </a>
                 </label>
                 <div class="col-sm-8 email-list" id="email-list-notification">
-                  <div class="email-entry input-group col-sm-8">
+                  <div class="email-entry input-group">
                     <input class="form-control" autocomplete="off" name="emails[]" type="text" placeholder="<%=l 'EMAIL_PLACEHOLDER' %>" />
                     <span class="input-group-btn">
                       <button class="btn btn-primary btn-add-email" type="button">