Add Tooltips to Fresh Comments (#9198)

* git rebase

* better label sizing for cyto (#9189)

* adjust padding on comments

* add tooltips to freshly posted comments

* add hover tooltips to emoji reaction button

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>

app/views/comments/_form.html.erb

@@ -8,7 +8,7 @@
   style="
     background-color: #f8f8f8; 
     border: 1px solid #e7e7e7;
-    padding: 18px;
+    padding: 36px;
     <%= "display: none" if location == :edit  %>
   "
 >

app/views/comments/create.js.erb

@@ -41,3 +41,5 @@ fileUploadElements.forEach(function(element) {
 });
 notyNotification('mint', 3000, 'success', 'topRight', 'Comment Added!');
 $('#comment-count')[0].innerHTML = parseInt($('#comment-count')[0].innerHTML, 10)+1;
+// attach tooltips to comment buttons
+$('[data-toggle="tooltip"]').tooltip();

app/views/notes/_comment.html.erb

@@ -56,7 +56,7 @@
         <a 
           aria-label="Edit Comment" 
           class="btn btn-outline-secondary btn-sm edit-comment-btn" 
-          rel="tooltip" 
+          data-toggle="tooltip" 
           title="Edit Comment"
           href="javascript:void(0)" onClick="
             $('#comment-form-wrapper-edit-<%= comment.cid %>').toggle();
@@ -69,16 +69,16 @@
         </a>
       <% end %>
       <% if current_user &. can_moderate? %>
-        <a aria-label="Mark Spam" rel="tooltip" title="Mark Spam: Remove Comment and Ban User" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
+        <a aria-label="Mark Spam" data-toggle="tooltip" title="Mark Spam: Remove Comment and Ban User" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
           <i class="fa fa-ban"></i>
         </a>
       <% else %>
-        <a aria-label="Flag as spam" rel="tooltip" title="Flag as spam to moderators" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" href="/moderate/flag_comment/<%= comment.id %>" data-toggle="tooltip" data-placement="top" title="Flag this Comment">
+        <a aria-label="Flag as spam" data-toggle="tooltip" title="Flag as spam to moderators" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" href="/moderate/flag_comment/<%= comment.id %>" data-toggle="tooltip" data-placement="top" title="Flag this Comment">
           <i class="fa fa-flag"></i>
         </a>
       <% end %>
       <% if logged_in_as(['admin', 'moderator']) || (current_user && (comment.uid == current_user.uid || comment.parent.uid == current_user.uid)) %>
-        <a aria-label="Delete Comment" rel="tooltip" title="Delete Comment" class="btn btn-outline-secondary btn-sm" id="c<%= comment.cid %>delete-btn">
+        <a aria-label="Delete Comment" data-toggle="tooltip" title="Delete Comment" class="btn btn-outline-secondary btn-sm" id="c<%= comment.cid %>delete-btn">
           <i class='icon fa fa-trash'></i>
         </a>
       <% end %>
@@ -132,13 +132,9 @@
         }
       });
     });
-
-    $(function () {
-      $('[data-toggle="tooltip"]').tooltip()
-    })
   </script>
 
-  <div style="border: 1px solid #e7e7e7;padding: 18px;" id="c<%= comment.cid %>show">
+  <div style="border: 1px solid #e7e7e7;padding: 36px;" id="c<%= comment.cid %>show">
 
     <% comment_body = comment.render_body %>
     <div class="comment-body" id="comment-body-<%= comment.cid %>">

app/views/notes/_comments.html.erb

@@ -36,5 +36,8 @@
   $(function() {
     // create an instance of the editor
     $E = new Editor();
+    // attach tooltips to comment buttons
+    $('[data-toggle="tooltip"]').tooltip();
+    $('[rel="tooltip"]').tooltip();
   });
 </script>

app/views/questions/show.html.erb

@@ -7,6 +7,9 @@
     $("img").lazyload();
     // create an instance of the editor
     $E = new Editor();
+    // attach tooltips to comment buttons
+    $('[data-toggle="tooltip"]').tooltip();
+    $('[rel="tooltip"]').tooltip();
   });
 </script>
 <%= javascript_include_tag('question') %>

app/views/wiki/show.html.erb

@@ -69,6 +69,9 @@
     <% if controller.action_name == 'comments' %>
       // create an instance of the editor
       $E = new Editor();
+      // attach tooltips to comment buttons
+      $('[data-toggle="tooltip"]').tooltip();
+      $('[rel="tooltip"]').tooltip();
     <% end %>
 
     setupWiki(<%= @node.id %>, "<%= @node.title %>", <%= params[:raw] == 'true' %>, <%= current_user.nil? != true %>);