Fix collapsed sidebar tooltips

app/assets/javascripts/sidebar/components/assignees/assignees.vue

@@ -130,6 +130,7 @@ export default {
       v-tooltip
       data-container="body"
       data-placement="left"
+      data-boundary="viewport"
       :title="collapsedTooltipTitle"
     >
       <i

app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue

@@ -75,6 +75,7 @@ export default {
       v-tooltip
       data-container="body"
       data-placement="left"
+      data-boundary="viewport"
       :title="tooltipLabel"
     >
       <icon

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -99,6 +99,7 @@ export default {
       v-tooltip
       data-container="body"
       data-placement="left"
+      data-boundary="viewport"
       :title="tooltipLabel"
     >
       <icon

app/assets/javascripts/sidebar/components/participants/participants.vue

@@ -84,6 +84,7 @@
       v-tooltip
       data-container="body"
       data-placement="left"
+      data-boundary="viewport"
       :title="participantLabel"
       @click="onClickCollapsedIcon"
     >

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -82,6 +82,7 @@
         :title="notificationTooltip"
         data-container="body"
         data-placement="left"
+        data-boundary="viewport"
       >
         <icon
           :name="notificationIcon"

app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue

@@ -114,6 +114,7 @@
     v-tooltip
     data-container="body"
     data-placement="left"
+    data-boundary="viewport"
     :title="tooltipText"
   >
     <icon name="timer" />

app/helpers/issuables_helper.rb

@@ -359,7 +359,8 @@ module IssuablesHelper
       url: project_todos_path(@project),
       delete_path: (dashboard_todo_path(todo) if todo),
       placement: (is_collapsed ? 'left' : nil),
-      container: (is_collapsed ? 'body' : nil)
+      container: (is_collapsed ? 'body' : nil),
+      boundary: 'viewport'
     }
   end
 

app/views/shared/issuable/_sidebar.html.haml

@@ -7,7 +7,7 @@
       - if current_user
         %span.issuable-header-text.hide-collapsed.float-left
           = _('Todo')
-      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left' } }
+      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
       - if current_user
         = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable
@@ -19,11 +19,10 @@
       .block.assignee
         = render "shared/issuable/sidebar_assignees", issuable: issuable, can_edit_issuable: can_edit_issuable, signed_in: current_user.present?
       .block.milestone
-        .sidebar-collapsed-icon.has-tooltip{ title: milestone_tooltip_title(issuable.milestone), data: { container: 'body', html: 'true', placement: 'left' } }
+        .sidebar-collapsed-icon.has-tooltip{ title: milestone_tooltip_title(issuable.milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
           = icon('clock-o', 'aria-hidden': 'true')
           %span.milestone-title
             - if issuable.milestone
-              %span.has-tooltip{ title: "#{issuable.milestone.title}<br>#{milestone_tooltip_title(issuable.milestone)}", data: { container: 'body', html: 'true', placement: 'left' } }
               = issuable.milestone.title
             - else
               = _('None')
@@ -50,7 +49,7 @@
             = icon('spinner spin', 'aria-hidden': 'true')
       - if issuable.has_attribute?(:due_date)
         .block.due_date
-          .sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 'true' }, title: sidebar_due_date_tooltip_label(issuable) }
+          .sidebar-collapsed-icon.has-tooltip{ data: { placement: 'left', container: 'body', html: 'true', boundary: 'viewport' }, title: sidebar_due_date_tooltip_label(issuable) }
             = icon('calendar', 'aria-hidden': 'true')
             %span.js-due-date-sidebar-value
               = issuable.due_date.try(:to_s, :medium) || 'None'
@@ -87,7 +86,7 @@
       - if @labels
         - selected_labels = issuable.labels
         .block.labels
-          .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } }
+          .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body", boundary: 'viewport' } }
             = icon('tags', 'aria-hidden': 'true')
             %span
               = selected_labels.size
@@ -134,7 +133,7 @@
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
         .sidebar-collapsed-icon.dont-change-state
-          = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left")
+          = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left", boundary: 'viewport')
         .cross-project-reference.hide-collapsed
           %span
             = _('Reference:')
@@ -143,7 +142,7 @@
           = clipboard_button(text: project_ref, title: _('Copy reference to clipboard'), placement: "left")
       - if current_user && issuable.can_move?(current_user)
         .block.js-sidebar-move-issue-block
-          .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body' }, title: _('Move issue') }
+          .sidebar-collapsed-icon{ data: { toggle: 'tooltip', placement: 'left', container: 'body', boundary: 'viewport' }, title: _('Move issue') }
             = custom_icon('icon_arrow_right')
           .dropdown.sidebar-move-issue-dropdown.hide-collapsed
             %button.btn.btn-default.btn-block.js-sidebar-dropdown-toggle.js-move-issue{ type: 'button',

app/views/shared/issuable/_sidebar_assignees.html.haml

@@ -4,7 +4,7 @@
       = _('Assignee')
       = icon('spinner spin')
 - else
-  .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: sidebar_assignee_tooltip_label(issuable) }
+  .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body", boundary: 'viewport' }, title: sidebar_assignee_tooltip_label(issuable) }
     - if issuable.assignee
       = link_to_member(@project, issuable.assignee, size: 24)
     - else

app/views/shared/milestones/_sidebar.html.haml

@@ -4,7 +4,7 @@
 %aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix", "always-show-toggle" => true }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar.milestone-sidebar
     .block.milestone-progress.issuable-sidebar-header
-      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left' } }
+      %a.gutter-toggle.float-right.js-sidebar-toggle.has-tooltip{ role: "button", href: "#", "aria-label" => "Toggle sidebar", title: sidebar_gutter_tooltip_text, data: { container: 'body', placement: 'left', boundary: 'viewport' } }
         = sidebar_gutter_toggle_icon
       .title.hide-collapsed
         %strong.bold== #{milestone.percent_complete(current_user)}%
@@ -14,7 +14,7 @@
         = milestone_progress_bar(milestone)
 
     .block.milestone-progress.hide-expanded
-      .sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left' } }
+      .sidebar-collapsed-icon.has-tooltip{ title: milestone_progress_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
         %span== #{milestone.percent_complete(current_user)}%
         = milestone_progress_bar(milestone)
 
@@ -36,24 +36,24 @@
         %span.collapsed-milestone-date
           - if milestone.start_date && milestone.due_date
             - if milestone.start_date.year == milestone.due_date.year
-              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left' } }
+              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
                 = milestone.start_date.strftime('%b %-d')
             - else
-              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left' } }
+              .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
                 = milestone.start_date.strftime('%b %-d %Y')
             .date-separator -
-            .due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left' } }
+            .due_date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
               = milestone.due_date.strftime('%b %-d %Y')
           - elsif milestone.start_date
             From
-            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left' } }
+            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
               = milestone.start_date.strftime('%b %-d %Y')
           - elsif milestone.due_date
             Until
-            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left' } }
+            .milestone-date.has-tooltip{ title: milestone_time_for(milestone.due_date, :end), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
               = milestone.due_date.strftime('%b %-d %Y')
           - else
-            .has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left' } }
+            .has-tooltip{ title: milestone_time_for(milestone.start_date, :start), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
               None
       .title.hide-collapsed
         Due date
@@ -72,7 +72,7 @@
 
     - if !project || can?(current_user, :read_issue, project)
       .block.issues
-        .sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left' } }
+        .sidebar-collapsed-icon.has-tooltip{ title: milestone_issues_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
           %strong
             = custom_icon('issues')
           %span= milestone.issues_visible_to_user(current_user).count
@@ -100,7 +100,7 @@
           = icon('spinner spin')
 
     .block.merge-requests
-      .sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left' } }
+      .sidebar-collapsed-icon.has-tooltip{ title: milestone_merge_requests_tooltip_text(milestone), data: { container: 'body', html: 'true', placement: 'left', boundary: 'viewport' } }
         %strong
           = custom_icon('mr_bold')
         %span= milestone.merge_requests.count
@@ -136,10 +136,10 @@
     - if milestone_ref.present?
       .block.reference
         .sidebar-collapsed-icon.dont-change-state
-          = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left")
+          = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left", boundary: 'viewport')
         .cross-project-reference.hide-collapsed
           %span
             Reference:
             %cite{ title: milestone_ref }
               = milestone_ref
-          = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left")
+          = clipboard_button(text: milestone_ref, title: "Copy reference to clipboard", placement: "left", boundary: 'viewport')