UX: Include tooltip text when hovering over posts column

app/assets/javascripts/discourse/components/posts-count-column.js.es6

@@ -0,0 +1,41 @@
+export default Ember.Component.extend({
+  tagName: 'td',
+  classNameBindings: [':posts', 'likesHeat'],
+  attributeBindings: ['title'],
+
+  ratio: function() {
+    var likes = parseFloat(this.get('topic.like_count')),
+        posts = parseFloat(this.get('topic.posts_count'));
+
+    if (posts < 10) { return 0; }
+
+    return (likes || 0) / posts;
+  }.property('topic.like_count', 'topic.posts_count'),
+
+  title: function() {
+    return I18n.messageFormat('posts_likes_MF', {
+      count: this.get('topic.posts_count'),
+      ratio: this.get('ratioText')
+    }).trim();
+  }.property('topic.posts_count', 'likesHeat'),
+
+  ratioText: function() {
+    var ratio = this.get('ratio');
+
+    if (ratio > 2.0) { return 'high'; }
+    if (ratio > 1.0) { return 'med'; }
+    if (ratio > 0.5) { return 'low'; }
+    return '';
+  }.property('ratio'),
+
+  likesHeat: Discourse.computed.fmt('ratioText', 'heatmap-%@'),
+
+  render: function(buffer) {
+    var postsCount = this.get('topic.posts_count'),
+        url = this.get('topic.lastUnreadUrl');
+
+    buffer.push("<a href='" + url + "' class='badge-posts " + this.get('likesHeat') + "'>");
+    buffer.push(Discourse.Formatter.number(postsCount));
+    buffer.push("</a>");
+  }
+});

app/assets/javascripts/discourse/models/topic.js

@@ -99,18 +99,6 @@ Discourse.Topic = Discourse.Model.extend({
     return this.get('new_posts');
   }.property('new_posts', 'id'),
 
-  likesHeat: function() {
-    var likes = parseFloat(this.get('like_count')),
-        posts = parseFloat(this.get('posts_count'));
-
-    if (posts < 10) { return; }
-    var ratio = (likes || 0) / posts;
-
-    if (ratio > 2.0) { return 'heatmap-high'; }
-    if (ratio > 1.0) { return 'heatmap-med'; }
-    if (ratio > 0.5) { return 'heatmap-low'; }
-  }.property('like_count'),
-
   viewsHeat: function() {
     var v = this.get('views');
     if( v >= Discourse.SiteSettings.topic_views_heat_high )   return 'heatmap-high';

app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars

@@ -39,9 +39,7 @@
               </td>
             {{/unless}}
 
-            <td {{bind-attr class=":num :posts likesHeat"}}>
-              <a href="{{unbound topic.lastUnreadUrl}}" class='badge-posts'>{{number topic.posts_count numberKey="posts_long"}}</a>
-            </td>
+            {{posts-count-column topic=topic class="num"}}
 
             {{#if controller.showParticipants}}
               <td class='participants'>

app/assets/javascripts/discourse/templates/components/topic-map.js.handlebars

@@ -21,7 +21,7 @@
       </a>
     </li>
     <li>
-      {{number topic.posts_count class=topic.likesHeat}}
+      {{posts-count-column topic=topic tagName="span"}}
       <h4>{{i18n posts_lowercase}}</h4>
     </li>
     <li class='secondary'>

app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars

@@ -46,8 +46,7 @@
   {{/each}}
 </td>
 
-<td {{bind-attr class=":num :posts likesHeat"}}><a href="{{lastUnreadUrl}}" class='badge-posts'>{{number posts_count numberKey="posts_long"}}</a></td>
-
+{{posts-count-column topic=model class="num"}}
 <td {{bind-attr class=":num :views viewsHeat"}}>{{number views numberKey="views_long"}}</td>
 
 {{activity-column topic=model class="num"}}

app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars

@@ -30,9 +30,7 @@
             </div>
             <div class="topic-item-stats clearfix">
               <div class="pull-right">
-                <div class='num posts'>
-                  <a href="{{lastUnreadUrl}}" {{bind-attr class="likesHeat"}}>{{number posts_count numberKey="posts_long"}}</a>
-                </div>
+                {{posts-count-column topic=topic tagName="div" class="num posts"}}
                 {{activity-column topic=topic tagName="div" class="num activity last"}}
               </div>
               {{#unless controller.hideCategory}}

app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars

@@ -33,8 +33,7 @@
   {{/unless}}
 
   <div class="pull-right">
-    <div class='num posts'><a href="{{lastUnreadUrl}}" {{bind-attr class="likesHeat"}}>{{number posts_count numberKey="posts_long"}}</a></div>
-
+    {{posts-count-column topic=this tagName="div" class="num posts"}}
     <div class='num activity last'>
       <a href="{{lastPostUrl}}" title='{{i18n last_post}}: {{{raw-date bumped_at}}}'>{{last_poster_username}}</a>
       {{activity-column topic=this tagName="span" class="age"}}

config/locales/client.en.yml

@@ -1320,6 +1320,12 @@ en:
     posts: "Posts"
     posts_lowercase: "posts"
     posts_long: "there are {{number}} posts in this topic"
+    posts_likes_MF: |
+      This topic has {count, plural, one {1 post} other {# posts}} {ratio, select,
+        low {with a high post to like ratio}
+        med {with a very high post to like ratio}
+        high {with an extremely high post to like ratio}
+        other {}}
     original_post: "Original Post"
     views: "Views"
     views_lowercase: "views"