diff --git a/components-chromium/paper-tooltip/paper-tooltip.js b/components-chromium/paper-tooltip/paper-tooltip.js
index 853eee1990258..1b36aa4c38b3f 100644
--- a/components-chromium/paper-tooltip/paper-tooltip.js
+++ b/components-chromium/paper-tooltip/paper-tooltip.js
@@ -42,12 +42,14 @@ Custom property | Description | Default
 `--paper-tooltip-background` | The background color of the tooltip | `#616161`
 `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9`
 `--paper-tooltip-text-color` | The text color of the tooltip | `white`
-`--paper-tooltip` | Mixin applied to the tooltip | `{}`
 `--paper-tooltip-delay-in` | Delay before tooltip starts to fade in | `500`
 `--paper-tooltip-delay-out` | Delay before tooltip starts to fade out | `0`
 `--paper-tooltip-duration-in` | Timing for animation when showing tooltip | `500`
 `--paper-tooltip-duration-out` | Timing for animation when hiding tooltip | `0`
-`--paper-tooltip-animation` | Mixin applied to the tooltip animation | `{}`
+
+Also prefer using the exposed CSS part as follows where possible
+paper-tooltip::part(tooltip) {...}
+
 @group Paper Elements
 @element paper-tooltip
 @demo demo/index.html
@@ -67,14 +69,12 @@ Polymer({
       #tooltip {
         display: block;
         outline: none;
-        @apply --paper-font-common-base;
         font-size: 10px;
         line-height: 1;
         background-color: var(--paper-tooltip-background, #616161);
         color: var(--paper-tooltip-text-color, white);
         padding: 8px;
         border-radius: 2px;
-        @apply --paper-tooltip;
       }
 
       @keyframes keyFrameScaleUp {
@@ -149,7 +149,6 @@ Polymer({
         animation-timing-function: ease-in;
         animation-duration: var(--paper-tooltip-duration-in, 500ms);
         animation-fill-mode: forwards;
-        @apply --paper-tooltip-animation;
       }
 
       .fade-out-animation {
@@ -160,7 +159,6 @@ Polymer({
         animation-timing-function: ease-in;
         animation-duration: var(--paper-tooltip-duration-out, 500ms);
         animation-fill-mode: forwards;
-        @apply --paper-tooltip-animation;
       }
 
       .scale-up-animation {
@@ -172,7 +170,6 @@ Polymer({
         animation-timing-function: ease-in;
         animation-duration: var(--paper-tooltip-duration-in, 500ms);
         animation-fill-mode: forwards;
-        @apply --paper-tooltip-animation;
       }
 
       .scale-down-animation {
@@ -184,7 +181,6 @@ Polymer({
         animation-timing-function: ease-in;
         animation-duration: var(--paper-tooltip-duration-out, 500ms);
         animation-fill-mode: forwards;
-        @apply --paper-tooltip-animation;
       }
 
       .slide-down-animation {
@@ -196,7 +192,6 @@ Polymer({
         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
         animation-duration: var(--paper-tooltip-duration-out, 500ms);
         animation-fill-mode: forwards;
-        @apply --paper-tooltip-animation;
       }
 
       .slide-down-animation-out {
@@ -208,7 +203,6 @@ Polymer({
         animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
         animation-duration: var(--paper-tooltip-duration-out, 500ms);
         animation-fill-mode: forwards;
-        @apply --paper-tooltip-animation;
       }
 
       .cancel-animation {
@@ -222,7 +216,7 @@ Polymer({
       }
     </style>
 
-    <div id="tooltip" class="hidden">
+    <div id="tooltip" class="hidden" part="tooltip">
       <slot></slot>
     </div>
 `,
@@ -282,8 +276,8 @@ Polymer({
      */
     animationExit: {type: String, value: ''},
     /**
-     * This property is deprecated.  Use --paper-tooltip-animation to change the
-     * animation. The entry and exit animations that will be played when showing
+     * This property is deprecated.
+     * The entry and exit animations that will be played when showing
      * and hiding the tooltip. If you want to override this, you must ensure
      * that your animationConfig has the exact format below.
      * @deprecated since version
@@ -311,12 +305,16 @@ Polymer({
 
   /**
    * Returns the target element that this tooltip is anchored to. It is
-   * either the element given by the `for` attribute, or the immediate parent
-   * of the tooltip.
+   * either the element given by the `for` attribute, the element manually
+   * specified through the `target` attribute, or the immediate parent of
+   * the tooltip.
    *
    * @type {Node}
    */
   get target() {
+    if (this._manualTarget)
+      return this._manualTarget;
+
     var parentNode = dom(this).parentNode;
     // If the parentNode is a document fragment, then we need to use the host.
     var ownerRoot = dom(this).getOwnerRoot();
@@ -331,6 +329,15 @@ Polymer({
     return target;
   },
 
+  /**
+   * Sets the target element that this tooltip will be anchored to.
+   * @param {Node} target
+   */
+  set target(target) {
+    this._manualTarget = target;
+    this._findTarget();
+  },
+
   /**
    * @return {void}
    */
@@ -429,13 +436,16 @@ Polymer({
    * @return {void}
    */
   updatePosition: function() {
-    if (!this._target || !this.offsetParent)
+    if (!this._target)
+      return;
+    var offsetParent = this._composedOffsetParent();
+    if (!offsetParent)
       return;
     var offset = this.offset;
     // If a marginTop has been provided by the user (pre 1.0.3), use it.
     if (this.marginTop != 14 && this.offset == 14)
       offset = this.marginTop;
-    var parentRect = this.offsetParent.getBoundingClientRect();
+    var parentRect = offsetParent.getBoundingClientRect();
     var targetRect = this._target.getBoundingClientRect();
     var thisRect = this.getBoundingClientRect();
     var horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
@@ -581,5 +591,45 @@ Polymer({
     }
     this.unlisten(this.$.tooltip, 'animationend', '_onAnimationEnd');
     this.unlisten(this, 'mouseenter', 'hide');
+  },
+
+  /**
+   * Polyfills the old offsetParent behavior from before the spec was changed:
+   * https://github.com/w3c/csswg-drafts/issues/159
+   */
+  _composedOffsetParent: function() {
+    // Do an initial walk to check for display:none ancestors.
+    for (let ancestor = this; ancestor; ancestor = flatTreeParent(ancestor)) {
+      if (!(ancestor instanceof Element))
+        continue;
+      if (getComputedStyle(ancestor).display === 'none')
+        return null;
+    }
+
+    for (let ancestor = flatTreeParent(this); ancestor; ancestor = flatTreeParent(ancestor)) {
+      if (!(ancestor instanceof Element))
+        continue;
+      const style = getComputedStyle(ancestor);
+      if (style.display === 'contents') {
+        // display:contents nodes aren't in the layout tree so they should be skipped.
+        continue;
+      }
+      if (style.position !== 'static') {
+        return ancestor;
+      }
+      if (ancestor.tagName === 'BODY')
+        return ancestor;
+    }
+    return null;
+
+    function flatTreeParent(element) {
+      if (element.assignedSlot) {
+        return element.assignedSlot;
+      }
+      if (element.parentNode instanceof ShadowRoot) {
+        return element.parentNode.host;
+      }
+      return element.parentNode;
+    }
   }
 });