Updated styling and markup.

common/lib/xmodule/xmodule/annotatable_module.py

@@ -50,7 +50,7 @@ class AnnotatableModule(XModule):
             del span.attrib['anchor']
     
     def _decorate_span(self, span, index, xmltree):
-        """ Decorates the span with an icon and highlight.  """
+        """ Decorates the span highlight.  """
 
         cls = ['annotatable-span', 'highlight']
         marker = self._get_marker_color(span)
@@ -59,11 +59,6 @@ class AnnotatableModule(XModule):
         
         span.tag = 'div'
         span.set('class', ' '.join(cls))
-        span_icon = etree.Element('span', { 'class': 'annotatable-icon'} )
-        span_icon.text = '';
-        span_icon.tail = span.text
-        span.text = ''
-        span.insert(0, span_icon)
         
     def _decorate_comment(self, span, index, xmltree):
         """ Sets the comment class. """

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

@@ -23,13 +23,14 @@
   display: inline;
   cursor: pointer;
   @each $highlight in (
-    (yellow rgb(239, 255, 0)), 
-    (orange rgb(255,113,0)),
-    (purple rgb(255,0,197)),
-    (blue rgb(0,90,255)),
-    (green rgb(111,255,9))) {
+    (red rgba(178,19,16,0.3)),
+    (orange rgba(255,165,0,0.3)),
+    (yellow rgba(255,255,10,0.3)), 
+    (green rgba(25,255,132,0.3)),
+    (blue rgba(35,163,255,0.3)),
+    (purple rgba(115,9,178,0.3))) {
     $marker: nth($highlight,1);
-    $color: lighten(nth($highlight,2), 20%);
+    $color: nth($highlight,2);
     @if $marker == yellow { &.highlight { background-color: $color; } }
     &.highlight-#{$marker} { background-color: $color; }
   }
@@ -49,17 +50,9 @@
   }
 }
 
-.annotatable-icon {
-  display: inline-block;
-  vertical-align: middle;
-  width: 17px;
-  height: 17px;
-  background: url(../images/link-icon.png) no-repeat;  
-}
-
 .annotatable-reply {
   display: block;
-  margin: 1em 0 .5em 0;
+  margin-bottom: 10px;
 }
 
 .annotatable-help-icon {
@@ -74,22 +67,75 @@
 }
 
 .ui-tooltip.qtip.ui-tooltip-annotatable {
-  $border-color: #F1D031;
+  $color: #fff;
+  $background: rgba(0,0,0,.85);
+  $border-radius: 1em;
+
+  -webkit-font-smoothing: antialiased;
+
   .ui-tooltip-titlebar {
-    border-color: $border-color;
+    color: $color;
+    background: $background;
+    border-left: 1px solid #333;
+    border-right: 1px solid #333;
+    border-top: 1px solid #333;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    padding: 5px 10px;
+
+    .ui-tooltip-title {
+      margin-right: 25px;
+      padding: 5px 0px;
+      border-bottom: 2px solid #333;
+      font-weight: bold;
+      &:before { 
+        font-weight: normal;
+        content: "Guided Discussion: " 
+      }
+    }
+    .ui-tooltip-icon { 
+      right: 10px;
+      background: #333;
+    }
+    .ui-state-hover {
+      color: inherit;
+      border: 1px solid #ccc;
+    }
   }
   .ui-tooltip-content {
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid $border-color;
-    color: #000;
-    font-weight: normal;
-    margin-bottom: 6px;
-    margin-right: 0;
-    padding: 4px;
+    color: $color;
+    background: $background;
     text-align: left;
+    font-weight: 400;
+    font-size: 11px;
+    padding: 0 10px;
     max-width: 300px;
     max-height: 300px;
+    border: none;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    border-left: 1px solid #333;
+    border-right: 1px solid #333;
+    border-bottom: 1px solid #333;
     overflow: auto;
-    -webkit-font-smoothing: antialiased; 
+    
+    .annotatable-comment {
+      display: block;
+      margin: 0px 0px 10px 0;
+    }
+  } 
+  p { color: $color }
+
+  &:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    height: 0;
+    width: 0;
+    margin-left: -7px;
+    border: 10px solid transparent;
+    border-top-color: rgba(0, 0, 0, .85);
   }
 }

common/lib/xmodule/xmodule/js/src/annotatable/display.coffee

@@ -108,8 +108,8 @@ class @Annotatable
         (api) =>
             anchor = $(el).data('discussion-anchor')
             comment = $(@commentSelector, el).first().clone()
-            comment.append(@createReplyLink(anchor)) if anchor
-            comment.contents()
+            comment = comment.after(@createReplyLink(anchor)) if anchor
+            comment
 
     makeTipTitle: (el) ->
         (api) =>