grading - added in tooltips for graded toggle on overview UI and moved icon…

grading - added in tooltips for graded toggle on overview UI and moved icon libraries and tooltip asset references to base template

cms/static/sass/_base.scss

@@ -337,4 +337,32 @@ body.show-wip {
         content: '';
         @extend .spinner-icon;
     }
+}
+
+.tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  padding: 0 10px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.85);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 26px;
+  color: #fff;
+  pointer-events: none;
+  opacity: 0;
+  @include transition(opacity 0.1s ease-out);
+
+  &:after {
+    content: '▾';
+    display: block;
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    margin-left: -7px;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.85);
+  }
 }
\ No newline at end of file

cms/templates/base.html

@@ -9,6 +9,9 @@
     <%static:css group='base-style'/>
     <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/skins/simple/style.css')}" />
     <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" />
+    <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
+    <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
+   
     <title><%block name="title"></%block></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
 
@@ -26,6 +29,9 @@
     <script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/markitup/jquery.markitup.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/markitup/sets/wiki/set.js')}"></script>
+    <script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
+    <script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
+
     <%static:js group='main'/>
     <%static:js group='module-js'/>
     <script src="${static.url('js/vendor/jquery.inlineedit.js')}"></script>
@@ -33,6 +39,7 @@
     <script src="${static.url('js/vendor/jquery.leanModal.min.js')}"></script>
     <script src="${static.url('js/vendor/jquery.tablednd.js')}"></script>
     <script src="${static.url('js/vendor/jquery.form.js')}"></script>
+    <script type="text/javascript" src="${static.url('coffee/src/discussion/tooltip_manager.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/htmlmixed.js')}"></script>
     <script type="text/javascript" src="${static.url('js/vendor/CodeMirror/css.js')}"></script>
     <script type="text/javascript">

cms/templates/overview.html

@@ -17,11 +17,6 @@
   <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
   <script src="${static.url('js/vendor/date.js')}"></script>
 
-  <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
-  <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
-  <script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
-  <script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
-
   <script type="text/javascript">
     (function() {
       $body = $('body');  
@@ -32,7 +27,6 @@
     function showGradeMenu(e) {
 
       $section = $(this).closest('.gradable-status');
-
       e.preventDefault();
       $section.toggleClass('is-active');
     }
@@ -151,8 +145,8 @@
             <div class="gradable-status">
               <h4 class="status-label">Not Graded</h4>
               
-              <a class="menu-toggle" href="#">
-                <span class="ss-icon ss-standard" data-tooltip="Make this gradable">&#x2713;</span>
+              <a data-tooltip="Mark/unmark this section as graded" class="menu-toggle" href="#">
+                <span class="ss-icon ss-standard">&#x2713;</span>
               </a>
                               
               <ul class="menu">
@@ -191,7 +185,7 @@
                   <div class="gradable-status">
                     <h4 class="status-label">Not Graded</h4>
                     
-                    <a class="menu-toggle" href="#">
+                    <a data-tooltip="Mark/unmark this subsection as graded" class="menu-toggle" href="#">
                       <span class="ss-icon ss-standard">&#x2713;</span>
                     </a>