tooltip showing who likes an event

app.rb

@@ -862,7 +862,7 @@ post '/event/:event_id/toggle_like' do |event_id|
   content_type :json
   event = Event[id: event_id]
   liked_response = event.toggle_site_like(current_site) ? 'liked' : 'unliked'
-  {result: liked_response, event_like_count: event.likes_dataset.count}.to_json
+  {result: liked_response, event_like_count: event.likes_dataset.count, liking_site_names: event.liking_site_names}.to_json
 end
 
 post '/event/:event_id/comment' do |event_id|

models/event.rb

@@ -8,6 +8,10 @@ class Event < Sequel::Model
   one_to_many :likes
   one_to_many :comments
 
+  def liking_site_names
+    likes.collect {|like| like.actioning_site.username }
+  end
+
   def add_site_comment(site, message)
     add_comment actioning_site_id: site.id, message: message
   end

models/like.rb

@@ -1,3 +1,4 @@
 class Like < Sequel::Model
   many_to_one :event
+  many_to_one :actioning_site, class: :Site
 end

public/assets/css/_base-sass/_basic.scss

@@ -22,3 +22,7 @@ hr{border-top:1px solid #ddd; display:block; height:1px; margin:$spacing*6 0}
 @import 'base-Media';		// Styling for base media elements
 @import 'typography';		// Styling for base typographical elements
 @import 'base-Form';		// Styling for base form elements
+
+.tooltip-inner {
+  white-space:pre-wrap;
+}

public/assets/css/neo.css

@@ -176,6 +176,9 @@ textarea {
   overflow: auto;
   vertical-align: top; }
 
+.tooltip-inner {
+  white-space: pre-wrap; }
+
 table {
   border-collapse: collapse;
   border-spacing: 0; }

public/assets/scripts/news/like.js

@@ -18,5 +18,6 @@ Like.prototype.toggleLike = function() {
 
       self.link.text(linkText)
     }
+    self.link.attr('data-original-title', res.liking_site_names.join('<br>'))
   })
 }

views/_news_actions.erb

@@ -1,6 +1,6 @@
 <div id="event_<%= event.id %>_actions" class="actions">
   <% if current_site %>
-    <a href="#" id="like" onclick="new Like(<%= event.id %>, '<%= csrf_token %>').toggleLike(); return false"><%= event.site_likes?(current_site) ? 'Unlike' : 'Like' %><%= event.likes_dataset.count > 0 ? " (#{event.likes_dataset.count})" : '' %></a>
+    <a href="#" id="like" data-placement="bottom" data-toggle="tooltip" data-original-title="<%= event.liking_site_names.join('<br>') %>" onclick="new Like(<%= event.id %>, '<%= csrf_token %>').toggleLike(); return false"><%= event.site_likes?(current_site) ? 'Unlike' : 'Like' %><%= event.likes_dataset.count > 0 ? " (#{event.likes_dataset.count})" : '' %></a>
   <% else %>
     <% event_like_count = event.likes_dataset.count %>
     <% if event_like_count > 0 %>

views/layout.erb

@@ -54,5 +54,9 @@
     <script src="/assets/scripts/underscore-min.js"></script>
     <script src="/assets/scripts/nav.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
+
+    <script>
+      $("a#like").tooltip({html: true})
+    </script>
   </body>
 </html>