Tooltip placement on award buttons

app/assets/javascripts/awards_handler.coffee

@@ -145,7 +145,7 @@ class @AwardsHandler
   createEmoji: (emoji) ->
     emojiCssClass = @resolveNameToCssClass(emoji)
 
-    buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me'>
+    buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='me' data-placement='bottom'>
       <div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>
       <span class='award-control-text js-counter'>1</span>
     </button>"

app/assets/stylesheets/pages/notes.scss

@@ -319,6 +319,7 @@ ul.notes {
   .award-control {
     padding-top: 2px;
     padding-bottom: 2px;
+    color: #8f8f8f;
     font-size: 13px;
   }
 }

app/views/emoji_awards/_awards_block.html.haml

 - grouped_emojis = awardable.grouped_awards(inline)
 .awards.js-awards-block{ class: ("hidden" if !inline && grouped_emojis.size == 0), data: { award_url: url_for([:toggle_emoji_award, @project.namespace.becomes(Namespace), @project, awardable]) } }
   - awards_sort(grouped_emojis).each do |emoji, awards|
-    %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button", class: (award_active_class(awards, current_user)), title: award_user_list(awards, current_user) }
+    %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button", class: (award_active_class(awards, current_user)), title: award_user_list(awards, current_user), data: { placement: "bottom" } }
       = emoji_icon(emoji)
       %span.award-control-text.js-counter
         = awards.count