placing tooltip content into the json file

_locales/en/messages.json

@@ -1202,5 +1202,11 @@
     },
     "controlAxisAux8": {
         "message": "AUX 8"
+    },
+    "pidHelp1": {
+        "message": "The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the LEVEL values differently. Please check the documentation."
+    },
+    "configHelp1": {
+        "message": "RSSI is a measurement of signal strength and is very handy so you know when your aircraft isw going out of range or if it is suffering RF interference."
     }
 }

main.css

@@ -37,17 +37,10 @@ a.disabled {
 }
 
 /* Help-Icon  */
-span .helpicon {
-    float: right;
-    margin-top: 2px;
-    margin-right: 0px;
-    display: block;
-    height: 14px;
-    width: 14px;
-    opacity: 0.2;
-    background-image: url(images/icons/cf_icon_info_grey.svg);
-    background-size: contain;
-    background-position: center;
+.helpicon:hover {
+    opacity: 1.0;
+    background-image: url(images/icons/cf_icon_info_green.svg);
+    transition: none;  
 }
 
 .helpicon {
@@ -61,12 +54,10 @@ span .helpicon {
     background-image: url(images/icons/cf_icon_info_grey.svg);
     background-size: contain;
     background-position: center;
+    transition: none;  
 }
 
-.helpicon:hover {
-    opacity: 1.0;
-    background-image: url(images/icons/cf_icon_info_green.svg);
-}
+
 
 /* Change here the content of the documentation button in all tabs!!!
 
@@ -1465,7 +1456,13 @@ dialog {
         margin-right: 7px;
         height: 14px;
         width: 14px;
+        transition: none;
+
+    }
+    
+    #tooltiptext {
     }
+    
     .gps_false {
         padding: 0px 3px 0px 3px;
         font-size: 10px;

main.js

@@ -131,8 +131,31 @@ $(document).ready(function () {
                           secondaryColor: '#c4c4c4' 
                         });
                         
-                        $(html).removeClass('toggle');
+                        $(html).removeClass('togglemedium');
+                    });
+                    
+                    
+                    	// loading tooltip
+                    jQuery(document).ready(function($) {
+                    $('cf_tip').each(function() { // Grab all ".cf_tip" elements, and for each...
+                        log(this); // ...print out "this", which now refers to each ".cf_tip" DOM element 
+                    });
+
+                    $('.cf_tip').each(function() { 
+                        $(this).jBox('Tooltip', {
+                            content: $(this).children('.cf_tooltiptext'),		
+                            delayOpen: 100,
+                            delayClose: 100,
+                            position: {
+                                x: 'right',
+                                y: 'center'
+                            },
+                            outside: 'x'
+                            });
+                        });
                     });
+    
+    
                     
                     // Build link to in-use CF version documentation
                     var documentationButton = $('div#content #button-documentation');
@@ -428,16 +451,6 @@ $("#showlog").on('click', function() {
 
 
 
+// loading tooltip PLACEHOLDER
+
 
-// loading tooltip
-$(document).ready(function() {
-$('.cf_tip').jBox('Tooltip', {
-    delayOpen: 100,
-    delayClose: 100,
-	position: {
-        x: 'right',
-        y: 'center'
-    },
-	outside: 'x'
-});
-});

tabs/configuration.html

@@ -281,9 +281,10 @@
             <div class="gui_box grey">
                 <div class="gui_box_titlebar">
                     <div class="spacer_box_title" i18n="configurationRSSI"></div>
-                    <div class="helpicon cf_tip"
-                        title="RSSI is a measurement of signal strength and is very handy so you know when your aircraft isw going out of range or if it is suffering RF interference."></div>
-                </div>
+                        <div class="helpicon cf_tip">
+                            <div class="cf_tooltiptext" i18n="configHelp1" style="display:none;"></div>
+                        </div>
+                    </div>
                 <div class="spacer_box">
                     <table cellpadding="0" cellspacing="0">
                         <thead>

tabs/configuration.js

@@ -89,7 +89,7 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
             {bit: 4, group: 'esc', name: 'MOTOR_STOP', description: 'Don\'t spin the motors when armed'},
             {bit: 5, group: 'other', name: 'SERVO_TILT', description: 'Servo gimbal'},
             {bit: 6, group: 'other', name: 'SOFTSERIAL', description: 'Enable CPU based serial ports'},
-            {bit: 7, group: 'gps', name: 'GPS', description: 'Configure port scenario first<div class="helpicon cf_tip" title="Remember to select port scenario first!"></div>'},
+            {bit: 7, group: 'gps', name: 'GPS', description: 'Configure port scenario first'},
             {bit: 8, group: 'rxFailsafe', name: 'FAILSAFE', description: 'Failsafe settings on RX signal loss'},
             {bit: 9, group: 'other', name: 'SONAR', description: 'Sonar'},
             {bit: 10, group: 'other', name: 'TELEMETRY', description: 'Telemetry output'},
@@ -355,22 +355,6 @@ TABS.configuration.initialize = function (callback, scrollPosition) {
 
             });
         });
-
-
-
-// loading tooltip
-	$(document).ready(function() {
-		$('.cf_tip').jBox('Tooltip', {
-		delayOpen: 100,
-		delayClose: 100,
-		position: {
-			x: 'right',
-			y: 'center'
-		},
-		outside: 'x'
-		});
-	});
-	
 		
 	
         $('a.save').click(function () {

tabs/pid_tuning.html

@@ -74,8 +74,9 @@
                             <th colspan="4">
                                 <div class="pid_mode">
                                     Accelerometer/Level
-                                    <div class="helpicon cf_tip"
-                                        title="The values below change the behaviour of the ANGLE and HORIZON flight modes. Different PID controllers handle the LEVEL values differently. Please check the documentation."></div>
+                                    <div class="helpicon cf_tip">
+                                       <div class="cf_tooltiptext" i18n="pidHelp1" style="display:none;"></div>
+                                    </div>
                                 </div>
                             </th>
                         </tr>

tabs/pid_tuning.js

@@ -264,20 +264,6 @@ TABS.pid_tuning.initialize = function (callback) {
         // translate to user-selected language
         localize();
 
-	// loading tooltip
-	$(document).ready(function() {
-	$('.cf_tip').jBox('Tooltip', {
-		delayOpen: 100,
-		delayClose: 100,
-		position: {
-        x: 'right',
-        y: 'center'
-		},
-		outside: 'x'
-	});
-	});
-
-
         hideUnusedPids(CONFIG.activeSensors);
 
         $('#showAllPids').on('click', function(){