diff --git a/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html b/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
index 5c9a64205d4..7eecfbcd92d 100644
--- a/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
+++ b/tensorboard/components/tf_line_chart_data_loader/tf-line-chart-data-loader.html
@@ -31,21 +31,22 @@
     <div id="chart-and-spinner-container">
       <vz-line-chart2
         id="chart"
-        x-components-creation-method="[[xComponentsCreationMethod]]"
-        x-type="[[xType]]"
-        y-value-accessor="[[yValueAccessor]]"
         color-scale="[[colorScale]]"
-        tooltip-columns="[[tooltipColumns]]"
-        smoothing-enabled="[[smoothingEnabled]]"
-        smoothing-weight="[[smoothingWeight]]"
-        tooltip-sorting-method="[[tooltipSortingMethod]]"
-        ignore-y-outliers="[[ignoreYOutliers]]"
-        style="[[_computeLineChartStyle(dataLoading)]]"
         default-x-range="[[defaultXRange]]"
         default-y-range="[[defaultYRange]]"
         fill-area="[[fillArea]]"
-        symbol-function="[[symbolFunction]]"
+        ignore-y-outliers="[[ignoreYOutliers]]"
         on-chart-attached="_onChartAttached"
+        smoothing-enabled="[[smoothingEnabled]]"
+        smoothing-weight="[[smoothingWeight]]"
+        style="[[_computeLineChartStyle(dataLoading)]]"
+        symbol-function="[[symbolFunction]]"
+        tooltip-columns="[[tooltipColumns]]"
+        tooltip-position="[[tooltipPosition]]"
+        tooltip-sorting-method="[[tooltipSortingMethod]]"
+        x-components-creation-method="[[xComponentsCreationMethod]]"
+        x-type="[[xType]]"
+        y-value-accessor="[[yValueAccessor]]"
       ></vz-line-chart2>
       <template is="dom-if" if="[[dataLoading]]">
         <div id="loading-spinner-container">
@@ -137,12 +138,15 @@
         xComponentsCreationMethod: Object,
         xType: String,
         yValueAccessor: Object,
-        tooltipColumns: Array,
         fillArea: Object,
 
         smoothingEnabled: Boolean,
         smoothingWeight: Number,
+
+        tooltipColumns: Array,
         tooltipSortingMethod: String,
+        tooltipPosition: String,
+
         ignoreYOutliers: Boolean,
 
         defaultXRange: Array,
diff --git a/tensorboard/components/vz_chart_helpers/BUILD b/tensorboard/components/vz_chart_helpers/BUILD
index d489ceaf682..5d2565bbf16 100644
--- a/tensorboard/components/vz_chart_helpers/BUILD
+++ b/tensorboard/components/vz_chart_helpers/BUILD
@@ -9,12 +9,15 @@ tf_web_library(
     srcs = [
         "vz-chart-helpers.html",
         "vz-chart-helpers.ts",
+        "vz-chart-tooltip.html",
+        "vz-chart-tooltip.ts",
     ],
     path = "/vz-chart-helpers",
     deps = [
         "//tensorboard/components/tf_imports:d3",
         "//tensorboard/components/tf_imports:lodash",
         "//tensorboard/components/tf_imports:plottable",
+        "//tensorboard/components/tf_imports:polymer",
         "//tensorboard/components/vz_sorting",
     ],
 )
diff --git a/tensorboard/components/vz_chart_helpers/vz-chart-tooltip.html b/tensorboard/components/vz_chart_helpers/vz-chart-tooltip.html
new file mode 100644
index 00000000000..a94db3bf8a9
--- /dev/null
+++ b/tensorboard/components/vz_chart_helpers/vz-chart-tooltip.html
@@ -0,0 +1,107 @@
+<!--
+@license
+Copyright 2016 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../tf-imports/lodash.html">
+
+<!--
+vz-line-chart creates an element that draws a line chart for
+displaying event values.
+
+This line chart supports drawing multiple lines at the same time, with features
+such as different X scales (linear and temporal), tooltips and smoothing.
+
+@element vz-line-chart
+@demo demo/index.html
+-->
+<dom-module id="vz-chart-tooltip">
+  <template>
+    <template id="template">
+      <div class="content">
+        <table>
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </template>
+    <style>
+    :host {
+      pointer-events: none;
+    }
+
+    .content {
+      background: rgba(0, 0, 0, .8);
+      border-radius: 4px;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+      color: #fff;
+      opacity: 0;
+      overflow: hidden;
+      pointer-events: none;
+      position: fixed;
+      will-change: transform;
+      z-index: 5;
+    }
+
+    table {
+      font-size: 13px;
+      line-height: 1.4em;
+      margin-top: 10px;
+      padding: 8px;
+    }
+
+    thead {
+      font-size: 14px;
+    }
+
+    tbody {
+      font-size: 13px;
+      line-height: 21px;
+      white-space: nowrap;
+    }
+
+    td {
+      padding: 0 5px;
+    }
+
+    .swatch {
+      border-radius: 50%;
+      display: block;
+      height: 18px;
+      width: 18px;
+    }
+
+    .closest .swatch {
+      box-shadow: inset 0 0 0 2px #fff;
+    }
+
+    th {
+      padding: 0 5px;
+      text-align: left;
+    }
+
+    .distant td:not(.swatch) {
+      opacity: .8;
+    }
+
+    .ghost {
+      opacity: .2;
+      stroke-width: 1px;
+    }
+    </style>
+  </template>
+  <script src="vz-chart-tooltip.js"></script>
+</dom-module>
diff --git a/tensorboard/components/vz_chart_helpers/vz-chart-tooltip.ts b/tensorboard/components/vz_chart_helpers/vz-chart-tooltip.ts
new file mode 100644
index 00000000000..6697512379c
--- /dev/null
+++ b/tensorboard/components/vz_chart_helpers/vz-chart-tooltip.ts
@@ -0,0 +1,173 @@
+/* Copyright 2018 The TensorFlow Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+namespace vz_chart_helper {
+
+export enum TooltipPosition {
+  /**
+   * Positions the tooltip to the bottom of the chart in most case. Positions
+   * the tooltip above the chart if there isn't sufficient space below.
+   */
+  AUTO = 'auto',
+  /**
+   * Position the tooltip on the bottom of the chart.
+   */
+  BOTTOM = 'bottom',
+  /**
+   * Positions the tooltip to the right of the chart.
+   */
+  RIGHT = 'right',
+}
+
+export interface VzChartTooltip extends Element {
+  content(): Element;
+  hide(): void;
+  updateAndPosition(anchorNode: Element, newDom: Array<any>): void;
+}
+
+Polymer({
+  is: 'vz-chart-tooltip',
+  properties: {
+    /**
+     * Possible values are TooltipPosition.BOTTOM and TooltipPosition.RIGHT.
+     */
+    position: {
+      type: String,
+      value: TooltipPosition.AUTO,
+    },
+
+    /**
+     * Minimum instance from the edge of the screen.
+     */
+    minDistFromEdge: {
+      type: Number,
+      value: 15,
+    },
+  },
+
+  ready() {
+    this._styleCache = null;
+    this._raf = null;
+    this._tunnel = null;
+  },
+
+  attached() {
+    this._tunnel = this._createTunnel();
+  },
+
+  detached() {
+    this.hide();
+    this._removeTunnel(this._tunnel);
+    this._tunnel = null;
+  },
+
+  hide() {
+    window.cancelAnimationFrame(this._raf);
+    this._styleCache = null;
+    this.content().style.opacity = 0;
+  },
+
+  content(): Element {
+    return this._tunnel.firstElementChild;
+  },
+
+  /**
+   * CSS Scopes the newly added DOM (in most tooltip where columns are
+   * invariable, only newly added rows are necessary to be scoped) and positions
+   * the tooltip with respect to the anchorNode.
+   */
+  updateAndPosition(anchorNode: Element, newDom: Element[]) {
+    newDom.forEach(row => this.scopeSubtree(row));
+
+    window.cancelAnimationFrame(this._raf);
+    this._raf = window.requestAnimationFrame(() => {
+      if (!this.isAttached) return;
+      this._repositionImpl(anchorNode);
+    });
+  },
+
+  _repositionImpl(anchorNode: Element) {
+    const tooltipContent = this.content();
+
+    const nodeRect = anchorNode.getBoundingClientRect();
+    const tooltipRect = tooltipContent.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const documentWidth = document.body.clientWidth;
+
+    const anchorTop = nodeRect.top;
+    const anchorBottom = anchorTop + nodeRect.height;
+    const effectiveTooltipHeight = tooltipRect.height +
+        vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
+
+    let bottom = null;
+    let left = Math.max(this.minDistFromEdge, nodeRect.left);
+    let right = null;
+    let top = anchorTop;
+
+    if (this.position == TooltipPosition.RIGHT) {
+      left = nodeRect.right;
+    } else {
+      top = anchorBottom + vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
+
+      // prevent it from falling off the right side of the screen.
+      if (documentWidth < left + tooltipRect.width + this.minDistFromEdge) {
+        left = null;
+        right = this.minDistFromEdge;
+      }
+    }
+
+    // If there is not enough space to render tooltip below the anchorNode in
+    // the viewport and there is enough space above, place it above the
+    // anchorNode.
+    if (this.position == TooltipPosition.AUTO &&
+        nodeRect.top - effectiveTooltipHeight > 0 &&
+        viewportHeight < nodeRect.top + nodeRect.height +
+            effectiveTooltipHeight) {
+      top = null;
+      bottom = viewportHeight - anchorTop +
+          vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
+    }
+
+    const newStyle = {
+      opacity: 1,
+      left: left ? `${left}px` : null,
+      right: right ? `${right}px` : null,
+      top: top ? `${top}px` : null,
+      bottom: bottom ? `${bottom}px` : null,
+    };
+
+    // Do not update the style (which can cause re-layout) if it has not
+    // changed.
+    if (!_.isEqual(this._styleCache, newStyle)) {
+      Object.assign(tooltipContent.style, newStyle);
+      this._styleCache = newStyle;
+    }
+  },
+
+  _createTunnel(): Element {
+    const div = document.createElement('div');
+    div.classList.add(`${this.is}-tunnel`);
+    const template = this.instanceTemplate(this.$.template);
+    this.scopeSubtree(template);
+    div.appendChild(template);
+    document.body.appendChild(div);
+    return div;
+  },
+
+  _removeTunnel(tunnel: Element) {
+    document.body.removeChild(tunnel);
+  },
+});
+
+}  // namespace vz_chart_helper
diff --git a/tensorboard/components/vz_line_chart2/line-chart.ts b/tensorboard/components/vz_line_chart2/line-chart.ts
index 1a8c7f589a0..f4f16c4d1df 100644
--- a/tensorboard/components/vz_line_chart2/line-chart.ts
+++ b/tensorboard/components/vz_line_chart2/line-chart.ts
@@ -70,7 +70,7 @@ export class LineChart {
   private symbolFunction: vz_chart_helpers.SymbolFn;
 
   private tooltipColumns: vz_chart_helpers.TooltipColumn[];
-  private tooltip: d3.Selection<any, any, any, any>;
+  private tooltip: vz_chart_helper.VzChartTooltip;
   private tooltipInteraction: Plottable.Interactions.Pointer;
   private tooltipPointsComponent: Plottable.Component;
 
@@ -91,7 +91,6 @@ export class LineChart {
   private smoothingWeight: number;
   private smoothingEnabled: boolean;
   private tooltipSortingMethod: string;
-  private tooltipPosition: string;
   private _ignoreYOutliers: boolean;
   private _lastMousePosition: Plottable.Point;
 
@@ -101,7 +100,6 @@ export class LineChart {
   private _defaultYRange: number[];
 
   private _tooltipUpdateAnimationFrame: number;
-  private _tooltipPositionAnimationFrame: number;
 
   private targetSVG: d3.Selection<any, any, any, any>;
 
@@ -110,7 +108,7 @@ export class LineChart {
       yValueAccessor: Plottable.IAccessor<number>,
       yScaleType: string,
       colorScale: Plottable.Scales.Color,
-      tooltip: d3.Selection<any, any, any, any>,
+      tooltip: vz_chart_helper.VzChartTooltip,
       tooltipColumns: vz_chart_helpers.TooltipColumn[],
       fillArea: FillArea,
       defaultXRange?: number[],
@@ -494,8 +492,7 @@ export class LineChart {
 
   private hideTooltips(): void {
     window.cancelAnimationFrame(this._tooltipUpdateAnimationFrame);
-    window.cancelAnimationFrame(this._tooltipPositionAnimationFrame);
-    this.tooltip.style('opacity', 0);
+    this.tooltip.hide();
     this.scatterPlot.attr('display', 'block');
     this.tooltipPointsComponent.content().selectAll('.point').remove();
   }
@@ -516,10 +513,34 @@ export class LineChart {
       target: vz_chart_helpers.Point,
       tooltipColumns: vz_chart_helpers.TooltipColumn[]) {
     if (!points.length) {
-      this.tooltip.style('opacity', 0);
+      this.tooltip.hide();
       return;
     }
 
+    const {colorScale} = this;
+    const swatchCol = {
+      title: '',
+      static: false,
+      evalType: TooltipColumnEvalType.DOM,
+      evaluate(d: vz_chart_helpers.Point) {
+        d3.select(this)
+            .select('span')
+            .style(
+                'background-color',
+                () => colorScale.scale(d.dataset.metadata().name));
+        return '';
+      },
+      enter(d: vz_chart_helpers.Point) {
+        d3.select(this)
+            .append('span')
+            .classed('swatch', true)
+            .style(
+                'background-color',
+                () => colorScale.scale(d.dataset.metadata().name));
+      },
+    };
+    tooltipColumns = [swatchCol, ...tooltipColumns];
+
     // Formatters for value, step, and wall_time
     let valueFormatter = vz_chart_helpers.multiscaleFormatter(
         vz_chart_helpers.Y_TOOLTIP_FORMATTER_PRECISION);
@@ -546,7 +567,21 @@ export class LineChart {
     }
 
     const self = this;
-    const rows = this.tooltip.select('tbody')
+    const table = d3.select(this.tooltip.content()).select('table');
+    const header = table.select('thead')
+        .selectAll('th')
+        .data(
+            tooltipColumns,
+            (column: vz_chart_helpers.TooltipColumn, _, __) => {
+              return column.title
+            });
+    const newHeaderNodes = header.enter()
+        .append('th')
+        .text(col => col.title)
+        .nodes();
+    header.exit().remove();
+
+    const rows = table.select('tbody')
         .selectAll('tr')
         .data(points, (pt: vz_chart_helpers.Point, _, __) => {
           return pt.dataset.metadata().name;
@@ -571,45 +606,22 @@ export class LineChart {
         .order();
 
     rows.exit().remove();
-    rows.enter().append('tr').each(function(point) {
-      self.drawTooltipRow(this, tooltipColumns, point);
-    });
-
-    // Because a tooltip content update is a DOM _mutation_, after an animation
-    // frame, we update the position which is another read and mutation.
-    window.cancelAnimationFrame(this._tooltipPositionAnimationFrame);
-    this._tooltipPositionAnimationFrame = window.requestAnimationFrame(() => {
-      this.repositionTooltip();
-    });
+    const newRowNodes = rows.enter()
+        .append('tr')
+        .each(function(point) {
+          self.drawTooltipRow(this, tooltipColumns, point);
+        })
+        .nodes();
+    const newNodes = [...newHeaderNodes, ...newRowNodes] as Element[];
+    this.tooltip.updateAndPosition(this.targetSVG.node(), newNodes);
   }
 
   private drawTooltipRow(
       row: d3.BaseType,
       tooltipColumns: vz_chart_helpers.TooltipColumn[],
       point: vz_chart_helpers.Point) {
-    const {smoothingEnabled, colorScale} = this;
     const self = this;
-    const swatchCol = {
-      name: 'Swatch',
-      evalType: TooltipColumnEvalType.DOM,
-      evaluate(d: vz_chart_helpers.Point) {
-        d3.select(this)
-            .select('span')
-            .style(
-                'background-color',
-                () => colorScale.scale(d.dataset.metadata().name));
-      },
-      enter(d: vz_chart_helpers.Point) {
-        d3.select(this)
-            .append('span')
-            .classed('swatch', true)
-            .style(
-                'background-color',
-                () => colorScale.scale(d.dataset.metadata().name));
-      },
-    };
-    const columns = d3.select(row).selectAll('td')
-        .data([swatchCol, ...tooltipColumns]);
+    const columns = d3.select(row).selectAll('td').data(tooltipColumns);
 
     columns.each(function(col: TooltipColumn) {
       // Skip column value update when the column is static.
@@ -637,30 +649,6 @@ export class LineChart {
     }
   }
 
-  /**
-   * Repositions the tooltip based on new width and height of the bounding box.
-   * In order to update the position, it _read_ the DOM, then _mutate_ the DOM.
-   */
-  private repositionTooltip() {
-    // compute left position
-    let documentWidth = document.body.clientWidth;
-    let node: any = this.tooltip.node();
-    let parentRect = node.parentElement.getBoundingClientRect();
-    let nodeRect = node.getBoundingClientRect();
-    // prevent it from falling off the right side of the screen
-    let left = documentWidth - parentRect.left - nodeRect.width - 60, top = 0;
-
-    if (this.tooltipPosition === 'right') {
-      left = Math.min(parentRect.width, left);
-    } else {  // 'bottom'
-      left = Math.min(0, left);
-      top = parentRect.height + vz_chart_helpers.TOOLTIP_Y_PIXEL_OFFSET;
-    }
-
-    this.tooltip.style('transform', `translate(${left}px, ${top}px)`);
-    this.tooltip.style('opacity', 1);
-  }
-
   private findClosestPoint(
       target: vz_chart_helpers.Point,
       dataset: Plottable.Dataset): vz_chart_helpers.Point | null {
@@ -841,10 +829,6 @@ export class LineChart {
     this.tooltipSortingMethod = method;
   }
 
-  public setTooltipPosition(position: string) {
-    this.tooltipPosition = position;
-  }
-
   public renderTo(targetSVG: d3.Selection<any, any, any, any>) {
     this.targetSVG = targetSVG;
     this.outer.renderTo(targetSVG);
diff --git a/tensorboard/components/vz_line_chart2/vz-line-chart2.html b/tensorboard/components/vz_line_chart2/vz-line-chart2.html
index 53e0adc07e4..fb46a5e0abf 100644
--- a/tensorboard/components/vz_line_chart2/vz-line-chart2.html
+++ b/tensorboard/components/vz_line_chart2/vz-line-chart2.html
@@ -20,6 +20,7 @@
 <link rel="import" href="../tf-imports/lodash.html">
 <link rel="import" href="../tf-imports/plottable.html">
 <link rel="import" href="../vz-chart-helpers/vz-chart-helpers.html">
+<link rel="import" href="../vz-chart-helpers/vz-chart-tooltip.html">
 <link rel="import" href="panZoomDragLayer.html">
 
 <!--
@@ -34,19 +35,9 @@
 -->
 <dom-module id="vz-line-chart2">
   <template>
-    <div id="tooltip">
-      <table>
-        <thead>
-          <!-- We inject the HTML instead of using dom-repeat because polymer
-               does not support dom-repeat templates within table elements. -->
-          <tr id="tooltip-table-header-row"
-              inner-h-t-m-l="[[_tooltipTableHeaderHtml]]"></tr>
-        </thead>
-        <tbody>
-        </tbody>
-      </table>
-    </div>
     <div id="chartdiv"></div>
+    <vz-chart-tooltip id="tooltip" position="[[tooltipPosition]]">
+    </vz-chart-tooltip>
     <style>
       :host {
         -moz-user-select: none;
@@ -65,60 +56,6 @@
         flex-grow: 1;
         flex-shrink: 1;
       }
-      tr:empty {
-        margin: 0;
-        padding: 0;
-      }
-      td {
-        padding-left: 5px;
-        padding-right: 5px;
-        font-size: 13px;
-        line-height: 21px;
-        opacity: 1;
-      }
-      #tooltip {
-        background: rgba(0, 0, 0, .8);
-        border-radius: 4px;
-        box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
-        color: #fff;
-        cursor: none;
-        font-size: 14px;
-        line-height: 1.4em;
-        margin-top: 10px;
-        opacity: 0;
-        padding: 8px;
-        pointer-events: none;
-        position: absolute;
-        will-change: transform;
-        z-index: 5;
-      }
-      .swatch {
-        border-radius: 50%;
-        width: 14px;
-        height: 14px;
-        display: block;
-        border: 2px solid rgba(0, 0, 0, 0);
-      }
-      .closest .swatch {
-        border: 2px solid #fff;
-      }
-      th {
-        padding-left: 5px;
-        padding-right: 5px;
-        text-align: left;
-      }
-      .distant td {
-        opacity: .8;
-      }
-
-      .distant td.swatch {
-        opacity: 1;
-      }
-
-      .ghost {
-        opacity: .2;
-        stroke-width: 1px;
-      }
 
       #chartdiv .main {
         cursor: crosshair;
diff --git a/tensorboard/components/vz_line_chart2/vz-line-chart2.ts b/tensorboard/components/vz_line_chart2/vz-line-chart2.ts
index 74897a107cc..2b7c3031a27 100644
--- a/tensorboard/components/vz_line_chart2/vz-line-chart2.ts
+++ b/tensorboard/components/vz_line_chart2/vz-line-chart2.ts
@@ -214,17 +214,6 @@ Polymer({
       value: false,
     },
 
-    /**
-     * Tooltip header innerHTML text. We cannot use a dom-repeat inside of a
-     * table element because Polymer does not support that. This seems like
-     * a bug in Polymer. Hence, we manually generate the HTML for creating a row
-     * of table headers.
-     */
-    _tooltipTableHeaderHtml: {
-      type: String,
-      computed: '_computeTooltipTableHeaderHtml(tooltipColumns)',
-    },
-
     /**
      * Change how the tooltip is sorted. Allows:
      * - "default" - Sort the tooltip by input order.
@@ -235,11 +224,17 @@ Polymer({
     tooltipSortingMethod: {type: String, value: 'default'},
 
     /**
-     * Change how the tooltip is positioned. Allows:
+     * Changes how the tooltip is positioned. Allows:
      * - "bottom" - Position the tooltip on the bottom of the chart.
      * - "right" - Position the tooltip to the right of the chart.
+     * - "auto" - Position the tooltip to the bottom of the chart in most case.
+     *            Position the tooltip above the chart if there isn't sufficient
+     *            space below.
      */
-    tooltipPosition: {type: String, value: 'bottom'},
+    tooltipPosition: {
+      type: String,
+      value: vz_chart_helper.TooltipPosition.BOTTOM,
+    },
 
     _chart: Object,
     _visibleSeriesCache: {
@@ -262,12 +257,10 @@ Polymer({
     '_reloadFromCache(_chart)',
     '_smoothingChanged(smoothingEnabled, smoothingWeight, _chart)',
     '_tooltipSortingMethodChanged(tooltipSortingMethod, _chart)',
-    '_tooltipPositionChanged(tooltipPosition, _chart)',
-    '_outliersChanged(ignoreYOutliers, _chart)'
+    '_outliersChanged(ignoreYOutliers, _chart)',
   ],
 
-  ready: function() {
-    this.scopeSubtree(this.$.tooltip, true);
+  ready() {
     this.scopeSubtree(this.$.chartdiv, true);
   },
 
@@ -412,7 +405,6 @@ Polymer({
           !this.tooltipColumns) {
         return;
       }
-      var tooltip = d3.select(this.$.tooltip);
       // We directly reference properties of `this` because this call is
       // asynchronous, and values may have changed in between the call being
       // initiated and actually being run.
@@ -421,7 +413,7 @@ Polymer({
           this.yValueAccessor,
           yScaleType,
           colorScale,
-          tooltip,
+          this.$.tooltip,
           this.tooltipColumns,
           this.fillArea,
           this.defaultXRange,
@@ -463,28 +455,11 @@ Polymer({
     this._chart.ignoreYOutliers(this.ignoreYOutliers);
   },
 
-  _computeTooltipTableHeaderHtml() {
-    // The first column contains the circle with the color of the run.
-    const titles = ['', ...this.tooltipColumns.map(c => c.title)];
-    return titles.map(title => `<th>${this._sanitize(title)}</th>`).join('');
-  },
-
   _tooltipSortingMethodChanged: function() {
     if (!this._chart) return;
     this._chart.setTooltipSortingMethod(this.tooltipSortingMethod);
   },
 
-  _tooltipPositionChanged: function() {
-    if (!this._chart) return;
-    this._chart.setTooltipPosition(this.tooltipPosition);
-  },
-
-  _sanitize(value) {
-    return value.replace(/</g, '&lt;')
-                .replace(/>/g, '&gt;')  // for symmetry :-)
-                .replace(/&/g, '&amp;');
-  },
-
 });
 
 }  // namespace vz_line_chart2
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/BUILD b/tensorboard/plugins/scalar/tf_scalar_dashboard/BUILD
index 57f154b7736..948056d8656 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/BUILD
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/BUILD
@@ -29,6 +29,7 @@ tf_web_library(
         "//tensorboard/components/tf_storage",
         "//tensorboard/components/tf_tensorboard:registry",
         "//tensorboard/components/tf_utils",
+        "//tensorboard/components/vz_chart_helpers",
         "@org_polymer_iron_collapse",
         "@org_polymer_paper_button",
         "@org_polymer_paper_checkbox",
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
index 34a4ccb36be..0cfc906fcbe 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-card.html
@@ -52,6 +52,7 @@
       smoothing-weight="[[smoothingWeight]]"
       tag-metadata="[[tagMetadata]]"
       tooltip-columns="[[_tooltipColumns]]"
+      tooltip-position="auto"
       tooltip-sorting-method="[[tooltipSortingMethod]]"
       x-type="[[xType]]"
     >
diff --git a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
index 6154adbd39f..59b70d11873 100644
--- a/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
+++ b/tensorboard/plugins/scalar/tf_scalar_dashboard/tf-scalar-dashboard.html
@@ -142,18 +142,18 @@ <h3>No scalar data was found.</h3>
                     <div class="layout horizontal wrap">
                       <template is="dom-repeat" items="[[page.items]]">
                         <tf-scalar-card
-                          x-type="[[_xType]]"
-                          smoothing-enabled="[[_smoothingEnabled]]"
-                          smoothing-weight="[[_smoothingWeight]]"
-                          tooltip-sorting-method="[[_tooltipSortingMethod]]"
-                          ignore-y-outliers="[[_ignoreYOutliers]]"
-                          show-download-links="[[_showDownloadLinks]]"
-                          request-manager="[[_requestManager]]"
+                          active="[[page.active]]"
                           data-to-load="[[item.series]]"
+                          ignore-y-outliers="[[_ignoreYOutliers]]"
                           multi-experiments="[[_getMultiExperiments(dataSelection)]]"
-                          tag="[[item.tag]]"
+                          request-manager="[[_requestManager]]"
+                          show-download-links="[[_showDownloadLinks]]"
+                          smoothing-enabled="[[_smoothingEnabled]]"
+                          smoothing-weight="[[_smoothingWeight]]"
                           tag-metadata="[[_tagMetadata(category, _runToTagInfo, item)]]"
-                          active="[[page.active]]"
+                          tag="[[item.tag]]"
+                          tooltip-sorting-method="[[_tooltipSortingMethod]]"
+                          x-type="[[_xType]]"
                         ></tf-scalar-card>
                       </template>
                     </div>