update bootstrap and add robot id tooltip

assets/css/styles.css

@@ -3,7 +3,6 @@
     font-family: Orbitron;
     src: url(fonts/orbitron-medium-webfont.woff);
 }
-
 html, body {
     height: 100%;
     font-family: Orbitron !important;
@@ -24,17 +23,21 @@ table.blockly-table {
 td, tr {
     padding: 0px;
 }
-/* robot ID label error */
+/* Tooltip */
+.tooltip.show {
+    opacity: 1 !important;
+}
+/* Robot ID label error */
 span.has-error {
     color: #a94442 !important;
     border-color: #a94442 !important;
     background-color: #f2dede !important;
 }
-/* robot ID input error */
+/* Robot ID input error */
 input.has-error {
     border-color: #a94442 !important;
 }
-/* robot connect button */
+/* Robot connect button */
 a.btn-robot-go, a.btn-robot-go:hover {
     color: #3768d8;
 }
@@ -129,7 +132,7 @@ div#readOnlyBlocklyCode {
         margin-right: auto;
     }
     /* robot ID label */
-    span.input-group-addon {
+    span.input-group-text {
         font-size: 2vw;
         font-weight: bold;
         padding: 0.5vw 1vw !important;

assets/js/main.js

@@ -11,6 +11,12 @@ var codingEnabled = false;
 var liveStreamVisible = false;
 
 window.addEventListener('load', function() {
+    // Activate tooltips
+    $('[data-toggle="tooltip"]').tooltip({
+        animated: 'fade',
+        placement: 'bottom',
+        html: true
+    });
     // Set the robot ID from the localstorage
     $('#robot-id').val(getLocalStorageItem('sumorobot.robotId'));
 
@@ -194,8 +200,8 @@ window.addEventListener('load', function() {
 
     // Robot GO button listener
     $('.btn-robot-go').click(function() {
-        // Extract and validate the selected robot ID
-        var robotId = $('#robot-id').val().trim();
+        // Get and validate the selected robot ID
+        var robotId = $('#robot-id').val().trim().toLowerCase();
         if (robotId === '' || /^([a-f0-9]{6})$/.test(robotId) == false) {
             $('#robot-id, #robot-label').addClass('has-error');
             return;