updated the tooltip of maps topic appears in

app/assets/javascripts/src/Metamaps.js

@@ -1092,14 +1092,16 @@ Metamaps.TopicCard = {
 
         $('.links .mapCount').unbind().click(function(event){
             $('.mapCount .tip').toggle();
+            $('.hoverTip').toggleClass('hide');
             event.stopPropagation();
         });
         $('.mapCount .tip').unbind().click(function(event){
             event.stopPropagation();
         });
-        $('.showCard').unbind('.hideTip').bind('click.hideTip', function(){
+        $('.showcard').unbind('.hideTip').bind('click.hideTip', function(){
             $('.mapCount .tip').hide();
         });
+
         var originalText = $('.showMore').html();
         $('.mapCount .tip .showMore').unbind().toggle(
             function(event){
@@ -1187,22 +1189,25 @@ Metamaps.TopicCard = {
             nodeValues.attachments = '';
         }
 
-        console.log(topic.get("inmaps"));
         var inmapsAr = topic.get("inmaps");
+        var inmapsLinks = topic.get("inmapsLinks");
         nodeValues.inmaps ='';
         if (inmapsAr.length < 6) {
             for (i = 0; i < inmapsAr.length; i++) {
-                nodeValues.inmaps += '<li>' + inmapsAr[i] + '</li>';
+                var url = "/maps/" + inmapsLinks[i];
+                nodeValues.inmaps += '<li><a href="' + url + '">'  + inmapsAr[i]+ '</a></li>';
             }
         }
         else {
             for (i = 0; i < 5; i++){
-                nodeValues.inmaps += '<li>' + inmapsAr[i] + '</li>';
+                var url = "/maps/" + inmapsLinks[i];
+                nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>';
             }
             extra = inmapsAr.length - 5;
             nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
             for (i = 5; i < inmapsAr.length; i++){
-                nodeValues.inmaps += '<li class="hideExtra extraText">' + inmapsAr[i] + '</li>';
+                var url = "/maps/" + inmapsLinks[i];
+                nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i]+ '</a></li>';
             }
         }
         nodeValues.permission = topic.get("permission");

app/assets/stylesheets/base.css

@@ -247,18 +247,39 @@
   background-image: url(map32_sprite.png);
   background-repeat: no-repeat;
   background-position: 0 0;
+  cursor: pointer;
 }
 .linkItem.mapCount:hover .mapCountIcon {
   background-position: 0 -32px;
 }
 
-.CardOnGraph .mapCount .tip {
+.linkItem.mapCount:hover .hoverTip {
+  display: block;
+}
+.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
   top: 44px;
   left: 0px;
   font-size: 12px !important;
 }
 
-.CardOnGraph .mapCount .tip:before {
+.hoverTip {
+  white-space: nowrap;
+  font-family: 'din-regular';
+  top: 44px;
+  left: 0px;
+  font-size: 12px !important;
+  display: none;
+  position: absolute;
+  background: black;
+  color: white;
+  border-radius: 4px;
+  line-height: 17px;
+  padding: 3px 5px 2px;
+  z-index: 100;
+}
+
+
+.CardOnGraph .mapCount .tip:before, .CardOnGraph .mapCount .hoverTip:before {
   content: '';
   position: absolute;
   top: 26px;
@@ -293,6 +314,14 @@
   cursor: pointer;
 }
 
+.mapCount .tip a {
+  color: white;
+}
+
+.mapCount .tip a:hover {
+  color: #757575;
+}
+
 
 .linkItem.synapseCount {
   margin-left: 2px;
@@ -315,9 +344,9 @@
 
 .CardOnGraph .synapseCount .tip {
   position: absolute;
-  background: #424242;
+  background: black;
   width: auto;
-  top: 45px;
+  top: 44px;
   color: white;
   white-space: nowrap;
   border-radius: 2px;
@@ -339,7 +368,7 @@
   margin-left: 6px;
   width: 0;
   height: 0;
-  border-bottom: 4px solid #424242;
+  border-bottom: 4px solid black;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
 }

app/helpers/topics_helper.rb

@@ -18,6 +18,7 @@ module TopicsHelper
       topic['originatorImage'] = t.user.image.url(:thirtytwo)
       topic['rtype'] = "topic"
       topic['inmaps'] = t.inmaps
+      topic['inmapsLinks'] = t.inmapsLinks
        
       temp.push topic
     end

app/models/topic.rb

@@ -58,8 +58,12 @@ class Topic < ActiveRecord::Base
     self.maps.map(&:name)
   end
 
+  def inmapsLinks
+    self.maps.map(&:id)
+  end
+
   def as_json(options={})
-    super(:methods =>[:user_name, :user_image, :map_count, :synapse_count, :inmaps])
+    super(:methods =>[:user_name, :user_image, :map_count, :synapse_count, :inmaps, :inmapsLinks])
   end
 
   def topic_autocomplete_method

app/views/layouts/_templates.html.erb

@@ -237,9 +237,10 @@
                 <img src="/assets/user.png" class="contributorIcon" width="32" height="32" />
                 <div class="contributorName">{{username}}</div>
             </div>
-            <div class="linkItem mapCount" title="Click to see which maps topic appears on">                  
+            <div class="linkItem mapCount">                  
                 <div class="mapCountIcon"></div>
                 {{map_count}} 
+                <div class ="hoverTip">Click to see which maps topic appears on</div>
                 <div class="tip"><ul>{{{inmaps}}}</ul></div>                              
             </div>