Resolve "Improve tooltips of collapsed sidebars"

1 files changed, 10 insertions, 4 deletions

diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index d0a2b27b0e6..7e9a50a885d 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -4,6 +4,7 @@
 
 import $ from 'jquery';
 import _ from 'underscore';
+import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
 import ModalStore from './boards/stores/modal_store';
@@ -25,7 +26,7 @@ export default class MilestoneSelect {
     }
 
     $els.each((i, dropdown) => {
-      let collapsedSidebarLabelTemplate, milestoneLinkNoneTemplate, milestoneLinkTemplate, selectedMilestone, selectedMilestoneDefault;
+      let milestoneLinkNoneTemplate, milestoneLinkTemplate, selectedMilestone, selectedMilestoneDefault;
       const $dropdown = $(dropdown);
       const projectId = $dropdown.data('projectId');
       const milestonesUrl = $dropdown.data('milestones');
@@ -52,7 +53,6 @@ export default class MilestoneSelect {
       if (issueUpdateURL) {
         milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
         milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
-        collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- name %><br /><%- remaining %>" data-placement="left" data-html="true"> <%- title %> </span>');
       }
       return $dropdown.glDropdown({
         showMenuAbove: showMenuAbove,
@@ -214,10 +214,16 @@ export default class MilestoneSelect {
                   data.milestone.remaining = timeFor(data.milestone.due_date);
                   data.milestone.name = data.milestone.title;
                   $value.html(milestoneLinkTemplate(data.milestone));
-                  return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
+                  return $sidebarCollapsedValue
+                    .attr('data-original-title', `${data.milestone.name}<br />${data.milestone.remaining}`)
+                    .find('span')
+                    .text(data.milestone.title);
                 } else {
                   $value.html(milestoneLinkNoneTemplate);
-                  return $sidebarCollapsedValue.find('span').text('No');
+                  return $sidebarCollapsedValue
+                    .attr('data-original-title', __('Milestone'))
+                    .find('span')
+                    .text(__('None'));
                 }
               })
               .catch(() => {