diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 775dc38b50..e42b885218 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/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; } } } diff --git a/common/test/acceptance/pages/lms/course_nav.py b/common/test/acceptance/pages/lms/course_nav.py index e8a13d72f1..bc68b55077 100644 --- a/common/test/acceptance/pages/lms/course_nav.py +++ b/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): diff --git a/common/test/acceptance/pages/lms/courseware.py b/common/test/acceptance/pages/lms/courseware.py index b4c72a4c1c..b87b3c194e 100644 --- a/common/test/acceptance/pages/lms/courseware.py +++ b/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) ) diff --git a/lms/templates/seq_module.html b/lms/templates/seq_module.html index cbda9971ee..f3ddc1938f 100644 --- a/lms/templates/seq_module.html +++ b/lms/templates/seq_module.html @@ -25,7 +25,7 @@ tabindex="0"> -
${item['type']} ${item['title']}
+