Add the tool tip for missing information on the 'add file' page

views/submission/templates/submission/user/add_files.html

@@ -197,20 +197,70 @@
             </form>
         </div>
         
+        <div id="tool_tip_missing_information"></div>
+
         <script type="text/javascript">
             // check for missing information
             {% if mark_information_details[ 'mark_incidental' ][ 'total' ] == 0 %}
-                $( "#marks_incidental_checked_error" ).css( "visibility", "visible" );
+                $( "#marks_incidental_checked_error" )
+                    .css( "visibility", "visible" )
+                    .on( "mouseenter", function( event ){
+                        $( "#tool_tip_missing_information" )
+                            .html( "No indidental mark uploaded." )
+                            .css( "visibility", "visible" )
+                            .css( "top", event.clientY - 30 )
+                            .css( "left", event.clientX + 20 )
+                    } )
+                    .on( "mouseleave", function( event ){
+                        $( "#tool_tip_missing_information" )
+                            .css( "visibility", "hidden" )
+                    } )
             {% elif mark_information_details[ 'mark_incidental' ][ 'missing' ] != 0 %}
-                $( "#marks_incidental_checked_error" ).css( "visibility", "visible" );
+                $( "#marks_incidental_checked_error" )
+                    .css( "visibility", "visible" )
+                    .on( "mouseenter", function( event ){
+                        $( "#tool_tip_missing_information" )
+                            .html( "Some information is missing for some incidental marks" )
+                            .css( "visibility", "visible" )
+                            .css( "top", event.clientY - 30 )
+                            .css( "left", event.clientX + 20 )
+                    } )
+                    .on( "mouseleave", function( event ){
+                        $( "#tool_tip_missing_information" )
+                            .css( "visibility", "hidden" )
+                    } )
             {% else %}
                 $( "#marks_incidental_checked_ok" ).css( "visibility", "visible" );
             {% endif %}
             
             {% if mark_information_details[ 'mark_target' ][ 'total' ] == 0 %}
-                $( "#marks_target_checked_error" ).css( "visibility", "visible" );
+                $( "#marks_target_checked_error" )
+                    .css( "visibility", "visible" )
+                    .on( "mouseenter", function( event ){
+                        $( "#tool_tip_missing_information" )
+                            .html( "No target mark uploaded." )
+                            .css( "visibility", "visible" )
+                            .css( "top", event.clientY - 30 )
+                            .css( "left", event.clientX + 20 )
+                    } )
+                    .on( "mouseleave", function( event ){
+                        $( "#tool_tip_missing_information" )
+                            .css( "visibility", "hidden" )
+                    } )
             {% elif mark_information_details[ 'mark_target' ][ 'missing' ] != 0 %}
-                $( "#marks_target_checked_error" ).css( "visibility", "visible" );
+                $( "#marks_target_checked_error" )
+                    .css( "visibility", "visible" )
+                    .on( "mouseenter", function( event ){
+                        $( "#tool_tip_missing_information" )
+                            .html( "Some information is missing for some target marks" )
+                            .css( "visibility", "visible" )
+                            .css( "top", event.clientY - 30 )
+                            .css( "left", event.clientX + 20 )
+                    } )
+                    .on( "mouseleave", function( event ){
+                        $( "#tool_tip_missing_information" )
+                            .css( "visibility", "hidden" )
+                    } )
             {% else %}
                 $( "#marks_target_checked_ok" ).css( "visibility", "visible" );
             {% endif %}