Tooltip popups for labels.

gracedb/views.py

@@ -855,10 +855,8 @@ def flexigridResponse(request, objects):
               'cell': [ '<a href="%s">%s</a>' %
                             (reverse(view, args=[object.graceid()]), object.graceid()),
                          #Labels
-                        " ".join(['<span title="%s %s" style="color: %s">%s</span>' %
-                                (label.creator.name, label.created, label.label.defaultColor, label.label.name)
-                                for label in object.labelling_set.all()
-                            ]),
+                        " ".join(["""<span onmouseover="tooltip.show(tooltiptext('%s', '%s', '%s'));" onmouseout="tooltip.hide();"  style="color: %s"> %s </span>""" % (label.label.name, label.creator.name, label.created, label.label.defaultColor, label.label.name)
+                                for label in object.labelling_set.all()]),
                         # Links to neighbors
                         ', '.join([
                             '<a href="%s">%s</a>' %

static/css/labeltips.css

+#tt {
+ position:absolute;
+ display:block;
+ background:url(images/tt_left.gif) top left no-repeat;
+ }
+ #tttop {
+ display:block;
+ height:5px;
+ margin-left:5px;
+ background:url(images/tt_top.gif) top right no-repeat;
+ overflow:hidden;
+ }
+ #ttcont {
+ display:block;
+ padding:2px 12px 3px 7px;
+ margin-left:5px;
+ background:#666;
+ color:#fff;
+ }
+#ttbot {
+display:block;
+height:5px;
+margin-left:5px;
+background:url(images/tt_bottom.gif) top right no-repeat;
+overflow:hidden;
+}

static/js/labeltips.js

+// Tooltip pop-ups for labels.
+var label_descriptions = {
+    cWB_s: "cWB_s",
+    cWB_r: "cWB_r",
+    EM_READY: "Has been processed by GDB Processor.<br/>Skymaps have been produced.",
+    SWIFT_NO: "Do not send notification to SWIFT telescope.",
+    SWIFT_GO: "Send notification to SWIFT telescope.",
+    LUMIN_NO: "LUMIN No",
+    LUMIN_GO: "LUMIN Go",
+    DQV: "Data quality veto.",
+    INJ: "Injection occured near this time."
+}
+function tooltiptext(name, creator, time) {
+    return ( creator + " " + time + "<br/>" + label_descriptions[name] );
+};
+var tooltip=function(){
+ var id = 'tt';
+ var top = 3;
+ var left = 3;
+ var maxw = 300;
+ var speed = 10;
+ var timer = 20;
+ var endalpha = 95;
+ var alpha = 0;
+ var tt,t,c,b,h;
+ var ie = document.all ? true : false;
+ return{
+  show:function(v,w){
+   if(tt == null){
+    tt = document.createElement('div');
+    tt.setAttribute('id',id);
+    t = document.createElement('div');
+    t.setAttribute('id',id + 'top');
+    c = document.createElement('div');
+    c.setAttribute('id',id + 'cont');
+    b = document.createElement('div');
+    b.setAttribute('id',id + 'bot');
+    tt.appendChild(t);
+    tt.appendChild(c);
+    tt.appendChild(b);
+    document.body.appendChild(tt);
+    tt.style.opacity = 0;
+    tt.style.filter = 'alpha(opacity=0)';
+    document.onmousemove = this.pos;
+   }
+   tt.style.display = 'block';
+   c.innerHTML = v;
+   tt.style.width = w ? w + 'px' : 'auto';
+   if(!w && ie){
+    t.style.display = 'none';
+    b.style.display = 'none';
+    tt.style.width = tt.offsetWidth;
+    t.style.display = 'block';
+    b.style.display = 'block';
+   }
+  if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
+  h = parseInt(tt.offsetHeight) + top;
+  clearInterval(tt.timer);
+  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
+  },
+  pos:function(e){
+   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
+   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
+   tt.style.top = (u - h) + 'px';
+   tt.style.left = (l + left) + 'px';
+  },
+  fade:function(d){
+   var a = alpha;
+   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
+    var i = speed;
+   if(endalpha - a < speed && d == 1){
+    i = endalpha - a;
+   }else if(alpha < speed && d == -1){
+     i = a;
+   }
+   alpha = a + (i * d);
+   tt.style.opacity = alpha * .01;
+   tt.style.filter = 'alpha(opacity=' + alpha + ')';
+  }else{
+    clearInterval(tt.timer);
+     if(d == -1){tt.style.display = 'none'}
+  }
+ },
+ hide:function(){
+  clearInterval(tt.timer);
+   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
+  }
+ };
+}();

templates/gracedb/event_detail.html

@@ -13,6 +13,8 @@
       src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
     </script>
     <script src="http{% if request.is_secure %}s{% endif %}://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
+    <script src="{{MEDIA_URL}}js/labeltips.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="{{MEDIA_URL}}css/labeltips.css">
     <script type="text/javascript">
         var bb = null;
 
@@ -187,7 +189,7 @@
         <td>{{ object.graceid }}</td>
         <td>
              {% for labelling in object.labelling_set.all %}
-                <span title="{{labelling.creator.name}}  {{labelling.created|utc}}" style="color: {{labelling.label.defaultColor}}">{{ labelling.label.name }}</span>
+                <span onmouseover="tooltip.show(tooltiptext('{{labelling.label.name}}', '{{labelling.creator.name}}', '{{labelling.created|utc}}'));" onmouseout="tooltip.hide();"  style="color: {{labelling.label.defaultColor}}">{{ labelling.label.name }}</span>
              {% endfor %}
         </td>
         <td>{{ object.group.name }} </td>
@@ -231,7 +233,7 @@
             <td><a href="{% url view object.graceid %}">{{ object.graceid }}</a></td>
             <td>
                  {% for labelling in object.labelling_set.all %}
-                    <span title="{{labelling.creator.name}}  {{labelling.created|utc}}" style="color: {{labelling.label.defaultColor}}">{{ labelling.label.name }}</span>
+                    <span onmouseover="tooltip.show(tooltiptext('{{labelling.label.name}}', '{{labelling.creator.name}}', '{{labelling.created|utc}}'));" onmouseout="tooltip.hide();"  style="color: {{labelling.label.defaultColor}}">{{ labelling.label.name }}</span>
                  {% endfor %}
             </td>
             <td>{{ object.group.name }} </td>

templates/gracedb/event_list.html

@@ -27,6 +27,9 @@
 <script src="/gracedb-static/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
 
 
+<script src="{{MEDIA_URL}}js/labeltips.js" type="text/javascript"></script>
+<link rel="stylesheet" href="{{MEDIA_URL}}css/labeltips.css">
+
     <script type="text/javascript">
     <!--
         function toggle_visibility(id) {
@@ -144,7 +147,7 @@
         <td><a href="{% url view obj.graceid %}">{{ obj.graceid }}</a></td>
         <td>
              {% for labelling in obj.labelling_set.all %}
-                <span title="{{labelling.creator.name}}  {{labelling.created|utc}}" style="color: {{labelling.label.defaultColor}}">{{ labelling.label.name }}</span>
+                <span onmouseover="tooltip.show(tooltiptext('{{labelling.label.name}}', '{{labelling.creator.name}}', '{{labelling.created|utc}}'));" onmouseout="tooltip.hide();"  style="color: {{labelling.label.defaultColor}}">{{ labelling.label.name }}</span>
              {% endfor %}
         </td>
         <td>{{ obj.group }} </td>