adds tooltip to samples dropdown and column names

app/assets/javascripts/samples/sample_datatable.js.erb

@@ -841,7 +841,6 @@ function changeToEditMode() {
             '</span>');
         },
         success: function(data) {
-          debugger;
           var form = $('#new-column-form');
           form.find('.help-block').remove();
           if (form.hasClass('has-error')) {
@@ -858,8 +857,7 @@ function changeToEditMode() {
             'data-editable data-deletable ' +
             'data-edit-url="' + data.edit_url + '" ' +
             'data-destroy-html-url="' + data.destroy_html_url + '"' +
-            '>' + truncateLongString(data.name,
-              <%= Constants::NAME_TRUNCATION_LENGTH_DROPDOWN %>) + '</th>');
+            '>' + generateColumnNameTooltip(data.name) + '</th>');
           var colOrder = table.colReorder.order();
           colOrder.push(colOrder.length);
           // Remove all event handlers as we re-initialize them later with
@@ -874,6 +872,7 @@ function changeToEditMode() {
           table = dataTableInit();
           table.on('init.dt', function() {
             loadColumnsNames();
+            dropdownOverflow();
           });
         },
         url: url
@@ -937,8 +936,7 @@ function changeToEditMode() {
           'class="' + visLi + '"' +
           '>' +
           '<i class="grippy"></i> ' +
-          '<span class="text">' + truncateLongString(el.innerText,
-            <%= Constants::NAME_TRUNCATION_LENGTH_DROPDOWN %>) + '</span> ' +
+          '<span class="text">' + generateColumnNameTooltip(el.innerText) + '</span> ' +
           '<input type="text" class="text-edit form-control" style="display: none;" />' +
           '<span class="pull-right controls">' +
           '<span class="ok glyphicon glyphicon-ok" style="display: none;"></span>' +
@@ -1034,8 +1032,7 @@ function changeToEditMode() {
         data: {custom_field: {name: newName}},
         dataType: 'json',
         success: function() {
-          text.text(truncateLongString(newName,
-            <%= Constants::NAME_TRUNCATION_LENGTH_DROPDOWN %>));
+          text.text(generateColumnNameTooltip(newName));
           $(table.columns().header()).filter('#' + id).text(newName);
           cancelEditMode();
         },
@@ -1208,6 +1205,18 @@ function changeToEditMode() {
     }
   }
 
+  function generateColumnNameTooltip(name) {
+    if( $.trim(name).length >
+        <%= Constants::NAME_TRUNCATION_LENGTH_DROPDOWN %>) {
+      return '<div class="modal-tooltip">' +
+             truncateLongString(name,
+               <%= Constants::NAME_TRUNCATION_LENGTH_DROPDOWN %>) +
+             '<span class="modal-tooltiptext">' + name + '</span></div>';
+    } else {
+      return name;
+    }
+  }
+
   // initialze dropdown after the table is loaded
   function initDropdown() {
     table.on('init.dt', function() {

app/assets/stylesheets/themes/scinote.scss

@@ -1453,6 +1453,7 @@ html.turbolinks-progress-bar::before {
     text-align: center;
     visibility: hidden;
     width: 200px;
+    word-wrap: break-word;
     z-index: $infinity;
   }
 }
@@ -1600,6 +1601,11 @@ textarea.textarea-sm {
   padding: 0;
   width: 300px;
 
+  .modal-tooltiptext {
+    margin-left: 0;
+    z-index: 99999999;
+  }
+
   li {
     background: $color-white;
     border: 1px solid $color-alto;
@@ -1690,3 +1696,8 @@ textarea.textarea-sm {
     }
   }
 }
+
+th.custom-field .modal-tooltiptext {
+  margin-left: 0;
+  z-index: 99999999;
+}

app/helpers/application_helper.rb

@@ -11,4 +11,13 @@ module ApplicationHelper
     controller_name == 'projects' ||
       (controller_name == 'reports' && action_name == 'index')
   end
+
+  def display_tooltip(message, len = Constants::NAME_TRUNCATION_LENGTH)
+    if message.strip.length > Constants::NAME_TRUNCATION_LENGTH
+      "<div class='modal-tooltip'>#{truncate(message.strip, length: len)} \
+        <span class='modal-tooltiptext'>#{message.strip}</span></div>".html_safe
+    else
+      truncate(message.strip, length: len)
+    end
+  end
 end

app/views/shared/_samples.html.erb

@@ -144,7 +144,7 @@
             <%= "data-edit-url='#{organization_custom_field_path(@organization, cf)}'" %>
             <%= "data-destroy-html-url='#{organization_custom_field_destroy_html_path(@organization, cf)}'" %>
         >
-          <%= cf.name %>
+          <%= display_tooltip(cf.name) %>
         </th>
         <% end %>
       </tr>