Merge pull request #11581 from edx/clytwynec/ac-327

Sequence navigation tooltip mechanism updated

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -195,21 +195,22 @@ $link-color: rgb(26, 161, 222) !default;
           }
         }
 
-        p {
+        .sequence-tooltip {
           @extend %ui-depth2;
+          display: none;
+          margin-top: ($baseline/5);
           background: #333;
           color: $white;
           font-family: $sans-serif;
           line-height: lh();
           right: 0;
-          opacity: 0.0;
           padding: 6px;
           position: absolute;
           top: 48px;
           text-shadow: 0 -1px 0 $black;
+          @include text-align(left);
           @include transition(all .1s $ease-in-out-quart 0s);
           white-space: pre;
-          visibility: hidden;
           pointer-events: none;
 
           &:empty {
@@ -234,11 +235,8 @@ $link-color: rgb(26, 161, 222) !default;
         }
 
         &:hover, &:focus {
-          p {
+          .sequence-tooltip {
             display: block;
-            margin-top: ($baseline/5);
-            opacity: 1.0;
-            visibility: visible;
           }
         }
       }

common/test/acceptance/pages/lms/course_nav.py

@@ -57,7 +57,7 @@ class CourseNavPage(PageObject):
         Example return value:
             ['Chemical Bonds Video', 'Practice Problems', 'Homework']
         """
-        seq_css = 'ol#sequence-list>li>a>p'
+        seq_css = 'ol#sequence-list>li>a>.sequence-tooltip'
         return self.q(css=seq_css).map(self._clean_seq_titles).results
 
     def go_to_section(self, section_title, subsection_title):

common/test/acceptance/pages/lms/courseware.py

@@ -87,7 +87,7 @@ class CoursewarePage(CoursePage):
         for index, tab in enumerate(self.q(css='#sequence-list > li')):
             ActionChains(self.browser).move_to_element(tab).perform()
             self.wait_for_element_visibility(
-                '#tab_{index} > p'.format(index=index),
+                '#tab_{index} > .sequence-tooltip'.format(index=index),
                 'Tab {index} should appear'.format(index=index)
             )
 

lms/templates/seq_module.html

@@ -25,7 +25,7 @@
            tabindex="0">
             <i class="icon fa seq_${item['type']}" aria-hidden="true"></i>
             <i class="fa fa-fw fa-bookmark bookmark-icon ${"is-hidden" if not item['bookmarked'] else "bookmarked"}" aria-hidden="true"></i>
-            <p><span class="sr">${item['type']}</span> ${item['title']}<span class="sr bookmark-icon-sr">&nbsp;${_("Bookmarked") if item['bookmarked'] else ""}</span></p>
+            <div class="sequence-tooltip"><span class="sr">${item['type']}&nbsp;</span>${item['title']}<span class="sr bookmark-icon-sr">&nbsp;${_("Bookmarked") if item['bookmarked'] else ""}</span></div>
           </a>
         </li>
         % endfor