added tooltips and got the topsy influence working

dynamic/css/site.sass

@@ -464,6 +464,29 @@ em
 .followeduser
   background-color: #D8F2AC
 
+.tooltip, .profile .details .followbackpercent .tooltip, .profile .details .topsyinfluence .tooltip
+  position: absolute
+  width: 150px
+  border: 2px solid
+  border-color= !green
+  background-color: white
+  margin-top: -60px
+  margin-left: -36px
+  text-transform: none
+  font-size: 10px
+  font-weight: normal
+  padding: 5px
+  filter:alpha(opacity=70)
+  -moz-opacity:0.7
+  -khtml-opacity: 0.7
+  opacity: 0.7
+  +borderRadius(5px)
+  display: none
+
+.profile .details .followbackpercent .down, .profile .details .topsyinfluence .down
+  margin-top: 35px
+  margin-left: 0px
+  width: 300px
 
 
 

dynamic/index.haml

@@ -11,33 +11,40 @@
     %div{:class=>'profile'}
       %div{:class=>'details'}
         %div{:class=>'followbackpercent'}
+          %div{:class=>'tooltip down'}= 'Probability that this person will follow you back if you follow them.'
           %div{:class=>'label'}= 'FOLLOWBACK LIKELIHOOD: '
           %div{:class=>'count'}= '0%'
         %div{:class=>'topsyinfluence'}
+          %div{:class=>'tooltip down'}= 'Influence Rating given by topsy.com (scale of 0-10)'
           %div{:class=>'label'}= 'TOPSY INFLUENCE:'
           %div{:class=>'count'}= '0'
         %div{:class=>'followmanager'}  
           %div{:class=>'follow'}= '+'
           %div{:class=>'unfollow'}= '-'
       %img{:src=>'/images/spinner.gif'}
       %div{:class=>'name'}= 'Loading...'
-      %div{:class=>'box nofollowback selected'}  
+      %div{:class=>'box nofollowback selected'}
+        %div{:class=>'tooltip'}= 'People this person follows but do not follow back.'  
         %span{:class=>'count'}= '0'
         %br
         %span= 'No Followback'
-      %div{:class=>'box followbacks'}  
+      %div{:class=>'box followbacks'}
+        %div{:class=>'tooltip'}= 'People this person follows and do follow back.'  
         %span{:class=>'count'}= '0'
         %br
         %span= 'Followbacks'
-      %div{:class=>'box fans'}  
+      %div{:class=>'box fans'}
+        %div{:class=>'tooltip'}= 'People that follow this person that this person does not follow.'  
         %span{:class=>'count'}= '0'
         %br
         %span= 'Fans'
       %div{:class=>'box following'}
+        %div{:class=>'tooltip'}= 'People this person follows.'
         %span{:class=>'count'}= '0'
         %br
         %span= 'Following'
-      %div{:class=>'box followers'}	
+      %div{:class=>'box followers'}
+        %div{:class=>'tooltip'}= 'People that are following this person.'	
         %span{:class=>'count'}= '0'  
         %br
         %span= 'Followers'

prod-buildout/css/site.css

@@ -489,3 +489,28 @@ em {
 
 .followeduser {
   background-color: #D8F2AC; }
+
+.tooltip, .profile .details .followbackpercent .tooltip, .profile .details .topsyinfluence .tooltip {
+  position: absolute;
+  width: 150px;
+  border: 2px solid;
+  border-color: #90d55c;
+  background-color: white;
+  margin-top: -60px;
+  margin-left: -36px;
+  text-transform: none;
+  font-size: 10px;
+  font-weight: normal;
+  padding: 5px;
+  -khtml-opacity: 0.7;
+  opacity: 0.7;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  display: none; }
+
+.profile .details .followbackpercent .down, .profile .details .topsyinfluence .down {
+  margin-top: 35px;
+  margin-left: 0px;
+  width: 300px; }

prod-buildout/index.html

@@ -23,10 +23,12 @@
           <div class='profile'>
             <div class='details'>
               <div class='followbackpercent'>
+                <div class='tooltip down'>Probability that this person will follow you back if you follow them.</div>
                 <div class='label'>FOLLOWBACK LIKELIHOOD:</div>
                 <div class='count'>0%</div>
               </div>
               <div class='topsyinfluence'>
+                <div class='tooltip down'>Influence Rating given by topsy.com (scale of 0-10)</div>
                 <div class='label'>TOPSY INFLUENCE:</div>
                 <div class='count'>0</div>
               </div>
@@ -38,26 +40,31 @@
             <img src='/images/spinner.gif' />
             <div class='name'>Loading...</div>
             <div class='box nofollowback selected'>
+              <div class='tooltip'>People this person follows but do not follow back.</div>
               <span class='count'>0</span>
               <br />
               <span>No Followback</span>
             </div>
             <div class='box followbacks'>
+              <div class='tooltip'>People this person follows and do follow back.</div>
               <span class='count'>0</span>
               <br />
               <span>Followbacks</span>
             </div>
             <div class='box fans'>
+              <div class='tooltip'>People that follow this person that this person does not follow.</div>
               <span class='count'>0</span>
               <br />
               <span>Fans</span>
             </div>
             <div class='box following'>
+              <div class='tooltip'>People this person follows.</div>
               <span class='count'>0</span>
               <br />
               <span>Following</span>
             </div>
             <div class='box followers'>
+              <div class='tooltip'>People that are following this person.</div>
               <span class='count'>0</span>
               <br />
               <span>Followers</span>

prod-buildout/js/friendpage.js

@@ -16,6 +16,7 @@ $(document).ready(function() {
      $('.profile .following').addClass('selected');
    });
 
+
    $('.profile .followers').bind('click', function() {
      replaceList(tw.followers);
      $('.profile .followers').addClass('selected');
@@ -47,6 +48,59 @@ $(document).ready(function() {
        $('.profile .details .unfollow').addClass('unfolloweduser');
       });
     });
-
+
+    //tooltips
+    $('.profile .following').bind('mouseenter', function() {
+        $('.profile .following .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .following').bind('mouseleave', function() {
+        $('.profile .following .tooltip').fadeOut('fast');
+     });    
+     $('.profile .followers').bind('mouseenter', function() {
+        $('.profile .followers .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .followers').bind('mouseleave', function() {
+        $('.profile .followers .tooltip').fadeOut('fast');
+     });    
+     $('.profile .fans').bind('mouseenter', function() {
+        $('.profile .fans .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .fans').bind('mouseleave', function() {
+        $('.profile .fans .tooltip').fadeOut('fast');
+     });
+     $('.profile .followbacks').bind('mouseenter', function() {
+        $('.profile .followbacks .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .followbacks').bind('mouseleave', function() {
+        $('.profile .followbacks .tooltip').fadeOut('fast');
+     });
+
+     $('.profile .nofollowback').bind('mouseenter', function() {
+        $('.profile .nofollowback .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .nofollowback').bind('mouseleave', function() {
+        $('.profile .nofollowback .tooltip').fadeOut('fast');
+     });
+
+     $('.profile .details .followbackpercent').bind('mouseenter', function() {
+         $('.profile .details .followbackpercent .tooltip').fadeIn('fast');
+      });
+
+      $('.profile .details .followbackpercent').bind('mouseleave', function() {
+         $('.profile .details .followbackpercent .tooltip').fadeOut('fast');
+      });
+      $('.profile .details .topsyinfluence').bind('mouseenter', function() {
+           $('.profile .details .topsyinfluence .tooltip').fadeIn('fast');
+      });
+
+      $('.profile .details .topsyinfluence').bind('mouseleave', function() {
+           $('.profile .details .topsyinfluence .tooltip').fadeOut('fast');
+      }); 
+
  });
 

prod-buildout/js/tweetwrap.js

@@ -136,7 +136,7 @@ var tweetWrap = function (screenname, initcallback, notifyprogress, abandon){
     }
 
     var getTopsyInfluence = function (screenname, callback){
-        $.getJSON('http://otter.topsy.com/authorinfo.json?&url=http://twitter.com/'+screenname + '&callback=?', callback);
+        $.getJSON('http://otter.topsy.com/authorinfo.js?&url=http://twitter.com/'+screenname + '&callback=?', callback);
     }
 
     var init = function(){

static/js/friendpage.js

@@ -16,6 +16,7 @@ $(document).ready(function() {
      $('.profile .following').addClass('selected');
    });
 
+
    $('.profile .followers').bind('click', function() {
      replaceList(tw.followers);
      $('.profile .followers').addClass('selected');
@@ -47,6 +48,59 @@ $(document).ready(function() {
        $('.profile .details .unfollow').addClass('unfolloweduser');
       });
     });
-
+
+    //tooltips
+    $('.profile .following').bind('mouseenter', function() {
+        $('.profile .following .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .following').bind('mouseleave', function() {
+        $('.profile .following .tooltip').fadeOut('fast');
+     });    
+     $('.profile .followers').bind('mouseenter', function() {
+        $('.profile .followers .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .followers').bind('mouseleave', function() {
+        $('.profile .followers .tooltip').fadeOut('fast');
+     });    
+     $('.profile .fans').bind('mouseenter', function() {
+        $('.profile .fans .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .fans').bind('mouseleave', function() {
+        $('.profile .fans .tooltip').fadeOut('fast');
+     });
+     $('.profile .followbacks').bind('mouseenter', function() {
+        $('.profile .followbacks .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .followbacks').bind('mouseleave', function() {
+        $('.profile .followbacks .tooltip').fadeOut('fast');
+     });
+
+     $('.profile .nofollowback').bind('mouseenter', function() {
+        $('.profile .nofollowback .tooltip').fadeIn('fast');
+     });
+
+     $('.profile .nofollowback').bind('mouseleave', function() {
+        $('.profile .nofollowback .tooltip').fadeOut('fast');
+     });
+
+     $('.profile .details .followbackpercent').bind('mouseenter', function() {
+         $('.profile .details .followbackpercent .tooltip').fadeIn('fast');
+      });
+
+      $('.profile .details .followbackpercent').bind('mouseleave', function() {
+         $('.profile .details .followbackpercent .tooltip').fadeOut('fast');
+      });
+      $('.profile .details .topsyinfluence').bind('mouseenter', function() {
+           $('.profile .details .topsyinfluence .tooltip').fadeIn('fast');
+      });
+
+      $('.profile .details .topsyinfluence').bind('mouseleave', function() {
+           $('.profile .details .topsyinfluence .tooltip').fadeOut('fast');
+      }); 
+
  });
 

static/js/tweetwrap.js

@@ -136,7 +136,7 @@ var tweetWrap = function (screenname, initcallback, notifyprogress, abandon){
     }
 
     var getTopsyInfluence = function (screenname, callback){
-        $.getJSON('http://otter.topsy.com/authorinfo.json?&url=http://twitter.com/'+screenname + '&callback=?', callback);
+        $.getJSON('http://otter.topsy.com/authorinfo.js?&url=http://twitter.com/'+screenname + '&callback=?', callback);
     }
 
     var init = function(){