From a3579e31834a1091dc26600066abdacf1f491ccd Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 10 Dec 2012 13:02:55 -0500
Subject: [PATCH 1/2] added in basic styles and plug-in reference for tool tip
 UI across Studio + Courseware Overview tool tip text

---
 cms/static/sass/_base.scss  | 28 ++++++++++++++++++++++++++++
 cms/templates/base.html     |  1 +
 cms/templates/overview.html | 22 +++++++++++-----------
 3 files changed, 40 insertions(+), 11 deletions(-)

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)}

From 3f5254adb008d191bebc396eaf7eedd0d9b4c451 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 10 Dec 2012 13:32:06 -0500
Subject: [PATCH 2/2] Added tool tip text to several other UI controls in
 templates

---
 cms/templates/asset_index.html      | 4 ++--
 cms/templates/component.html        | 2 +-
 cms/templates/editable_preview.html | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/cms/templates/asset_index.html b/cms/templates/asset_index.html
index 900ef3b697..173b751305 100644
--- a/cms/templates/asset_index.html
+++ b/cms/templates/asset_index.html
@@ -21,7 +21,7 @@
         </div>
       </td>
       <td class="name-col">
-        <a href="{{url}}" class="filename">{{displayname}}</a>
+        <a data-tooltip="Open/download this file" href="{{url}}" class="filename">{{displayname}}</a>
         <div class="embeddable-xml"></div>
       </td>
       <td class="date-col">
@@ -61,7 +61,7 @@
                 </div>
               </td>
               <td class="name-col">
-                <a href="${asset['url']}" class="filename">${asset['displayname']}</a>
+                <a data-tooltip="Open/download this file" href="${asset['url']}" class="filename">${asset['displayname']}</a>
                 <div class="embeddable-xml"></div>
               </td>
               <td class="date-col">
diff --git a/cms/templates/component.html b/cms/templates/component.html
index 2ec54d3b29..b7ad9c3c33 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -9,5 +9,5 @@
   <a href="#" class="edit-button standard"><span class="edit-icon"></span>Edit</a>
   <a href="#" class="delete-button standard"><span class="delete-icon"></span>Delete</a>  
 </div>
-<a href="#" class="drag-handle"></a>
+<a data-tooltip="Drag to reorder" href="#" class="drag-handle"></a>
 ${preview}
\ No newline at end of file
diff --git a/cms/templates/editable_preview.html b/cms/templates/editable_preview.html
index 16fca59e14..731fd9b1c8 100644
--- a/cms/templates/editable_preview.html
+++ b/cms/templates/editable_preview.html
@@ -4,7 +4,7 @@ ${content}
   <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
   <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>	
 </div>
-<a href="#" class="drag-handle"></a>
+<a data-tooltip="Drag to reorder" href="#" class="drag-handle"></a>
 <div class="component-editor">
   <h5>Edit Video Component</h5>
   <textarea class="component-source"><video youtube="1.50:q1xkuPsOY6Q,1.25:9WOY2dHz5i4,1.0:4rpg8Bq6hb4,0.75:KLim9Xkp7IY"/></textarea>