diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 7f5dcacf8b..22a5a7e128 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -367,4 +367,32 @@ body.show-wip {
   .delete-icon {
     margin-right: 4px;
   }
+}
+
+.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: normal;
+  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
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 9861f2a3de..90212fe7b8 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -33,6 +33,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">
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index a75a27745f..4cfcfac2fc 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -22,7 +22,7 @@
   <script type="text/template" id="new-section-template">
     <section class="courseware-section branch new-section">
       <header>
-        <a href="#" class="expand-collapse-icon collapse"></a>
+        <a href="#"  data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a>
         <div class="item-details">
           <h3 class="section-name">
           <form class="section-name-form">
@@ -38,7 +38,7 @@
   <script type="text/template" id="blank-slate-template">
     <section class="courseware-section branch new-section">
       <header>
-        <a href="#" class="expand-collapse-icon collapse"></a>
+        <a href="#"  data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a>
         <div class="item-details">
           <h3 class="section-name">
           <span class="section-name-span">Click here to set the section name</span>
@@ -49,8 +49,8 @@
           </form>
         </div>
         <div class="item-actions">
-          <a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
-          <a href="#" class="drag-handle"></a>
+          <a href="#" data-tooltip="Delete this section" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
+          <a href="#" data-tooltip="Drag to re-order" class="drag-handle"></a>
         </div>
       </header>
     </section>
@@ -105,10 +105,10 @@
         % for section in sections:
         <section class="courseware-section branch" data-id="${section.location}">
           <header>
-            <a href="#" class="expand-collapse-icon collapse"></a>
+            <a href="#" data-tooltip="Collapse/expand this section" class="expand-collapse-icon collapse"></a>
             <div class="item-details" data-id="${section.location}">
               <h3 class="section-name">
-                <span class="section-name-span">${section.display_name}</span>
+                <span data-tooltip="Edit this section's name" class="section-name-span">${section.display_name}</span>
                 <form class="section-name-edit" style="display:none">
                   <input type="text" value="${section.display_name}" class="edit-section-name" autocomplete="off"/>
                   <input type="submit" class="save-button edit-section-name-save" value="Save" />
@@ -131,8 +131,8 @@
               </div>
             </div>
             <div class="item-actions">
-              <a href="#" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
-              <a href="#" class="drag-handle"></a>
+              <a href="#" data-tooltip="Delete this section" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
+              <a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>
             </div>
           </header>
           <div class="subsection-list">
@@ -146,15 +146,15 @@
               <li class="branch collapsed" data-id="${subsection.location}">
                 <div class="section-item">
                   <div>
-                    <a href="#" class="expand-collapse-icon expand"></a>
+                    <a href="#" data-tooltip="Collapse/expand this subsection" class="expand-collapse-icon expand"></a>
                     <a href="${reverse('edit_subsection', args=[subsection.location])}">
                       <span class="folder-icon"></span>
                       <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name}</span></span>
                     </a>
                   </div>
                   <div class="item-actions">
-                    <a href="#" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>                    
-                    <a href="#" class="drag-handle"></a>
+                    <a href="#" data-tooltip="Delete this subsection" class="delete-button delete-subsection-button"><span class="delete-icon"></span></a>                    
+                    <a href="#" data-tooltip="Drag to reorder" class="drag-handle"></a>
                   </div>
                 </div>
                 ${units.enum_units(subsection)}