trucates text to prevent overflow and adds tooltip to it

app/assets/javascripts/compare_autocomplete.js.es6

@@ -55,6 +55,14 @@
           $('.dropdown-toggle-text', $dropdown).text(text);
           $dropdownContainer.removeClass('open');
         });
+
+        $dropdownContainer.on('click' , '.dropdown-content a', (e) => {
+         $dropdown.prop('title', e.target.text.replace(/_+?/g,'-'));
+          if ($dropdown.hasClass('has-tooltip')) {
+            $dropdown.tooltip('fixTitle');
+          }
+
+        })
       });
     };
 

app/views/projects/compare/_form.html.haml

@@ -7,16 +7,16 @@
       .input-group.inline-input-group
         %span.input-group-addon from
         = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
-          .dropdown-toggle-text= params[:from] || 'Select branch/tag'
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+          .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
       = render "ref_dropdown"
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
         %span.input-group-addon to
         = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
-          .dropdown-toggle-text= params[:to] || 'Select branch/tag'
+        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+          .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
       = render "ref_dropdown"
      
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"