Permalink
Browse files

added tooltips and got the topsy influence working

  • Loading branch information...
1 parent 1bf6bdd commit 98aca99301125f606ec00ef1b50c58db7d70561e @robrighter committed Apr 27, 2010
View
@@ -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
View
@@ -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'
View
@@ -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; }
View
@@ -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>
@@ -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');
+ });
+
});
@@ -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 + '&amp;callback=?', callback);
+ $.getJSON('http://otter.topsy.com/authorinfo.js?&url=http://twitter.com/'+screenname + '&amp;callback=?', callback);
}
var init = function(){
View
@@ -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');
+ });
+
});
View
@@ -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 + '&amp;callback=?', callback);
+ $.getJSON('http://otter.topsy.com/authorinfo.js?&url=http://twitter.com/'+screenname + '&amp;callback=?', callback);
}
var init = function(){

0 comments on commit 98aca99

Please sign in to comment.