diff --git a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
index 60b1a1a..41a448e 100644
--- a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
+++ b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls.ts
@@ -29,7 +29,14 @@
 import {fire} from '../../../utils/event-util';
 import {DiffInfo} from '../../../types/diff';
 import {assertIsDefined} from '../../../utils/common-util';
-import {css, customElement, html, LitElement, property} from 'lit-element';
+import {
+  css,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from 'lit-element';
 
 import {
   ContextButtonType,
@@ -205,7 +212,7 @@
   private createContextButton(
     type: ContextButtonType,
     linesToExpand: number,
-    tooltipText?: string
+    tooltip?: TemplateResult
   ) {
     let text = '';
     let groups: GrDiffGroup[] = []; // The groups that replace this one if tapped.
@@ -269,11 +276,6 @@
       groups
     );
 
-    const tooltip = tooltipText
-      ? html`<paper-tooltip offset="10"
-          ><div class="breadcrumbTooltip">${tooltipText}</div></paper-tooltip
-        >`
-      : undefined;
     const button = html` <gr-button
       class="${classes}"
       link="true"
@@ -396,6 +398,24 @@
     return undefined;
   }
 
+  private createBlockButtonTooltip(
+    buttonType: ContextButtonType,
+    syntaxPath: SyntaxBlock[],
+    linesToExpand: number
+  ) {
+    // Create breadcrumb string:
+    // myNamepace > MyClass > myMethod1 > aLocalFunctionInsideMethod1 > (anonymous)
+    const tooltipText = syntaxPath.length
+      ? syntaxPath.map(b => b.name || '(anonymous)').join(' > ')
+      : `${linesToExpand} common lines`;
+
+    const position =
+      buttonType === ContextButtonType.BLOCK_ABOVE ? 'top' : 'bottom';
+    return html`<paper-tooltip offset="10" position="${position}"
+      ><div class="breadcrumbTooltip">${tooltipText}</div></paper-tooltip
+    >`;
+  }
+
   private createBlockButton(
     buttonType: ContextButtonType,
     numLines: number,
@@ -408,14 +428,8 @@
       syntaxTree
     );
     let linesToExpand = numLines;
-    let tooltipText = `${linesToExpand} common lines`;
     if (outlineSyntaxPath.length) {
       const {range} = outlineSyntaxPath[outlineSyntaxPath.length - 1];
-      // Create breadcrumb string:
-      // myNamepace > MyClass > myMethod1 > aLocalFunctionInsideMethod1 > (anonymous)
-      tooltipText = outlineSyntaxPath
-        .map(b => b.name || '(anonymous)')
-        .join(' > ');
       const targetLine =
         buttonType === ContextButtonType.BLOCK_ABOVE
           ? range.end_line
@@ -425,7 +439,12 @@
         linesToExpand = distanceToTargetLine;
       }
     }
-    return this.createContextButton(buttonType, linesToExpand, tooltipText);
+    const tooltip = this.createBlockButtonTooltip(
+      buttonType,
+      outlineSyntaxPath,
+      linesToExpand
+    );
+    return this.createContextButton(buttonType, linesToExpand, tooltip);
   }
 
   private contextRange() {
diff --git a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls_test.ts b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls_test.ts
index d866c1a..f59b19d 100644
--- a/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls_test.ts
+++ b/polygerrit-ui/app/elements/diff/gr-context-controls/gr-context-controls_test.ts
@@ -366,12 +366,21 @@
     const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
       '.blockExpansion gr-button'
     );
-    // querySelector('.breadcrumbTooltip')!.textContent!.trim()
+    const tooltipAbove = blockExpansionButtons[0].querySelector(
+      'paper-tooltip'
+    )!;
+    const tooltipBelow = blockExpansionButtons[1].querySelector(
+      'paper-tooltip'
+    )!;
     assert.equal(
-      blockExpansionButtons[0]
-        .querySelector('.breadcrumbTooltip')!
-        .textContent?.trim(),
+      tooltipAbove.querySelector('.breadcrumbTooltip')!.textContent?.trim(),
       '20 common lines'
     );
+    assert.equal(
+      tooltipBelow.querySelector('.breadcrumbTooltip')!.textContent?.trim(),
+      '20 common lines'
+    );
+    assert.equal(tooltipAbove!.getAttribute('position'), 'top');
+    assert.equal(tooltipBelow!.getAttribute('position'), 'bottom');
   });
 });