Settings WebUI: site list, keep tooltip visible within offsetParent

Bug: 899183
Change-Id: I36a9c92556215d79bc40dbe9aed6ec8f1d5fa5c1
Reviewed-on: https://chromium-review.googlesource.com/c/1315627Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#605027}

chrome/browser/resources/settings/site_settings/site_list.html

@@ -78,7 +78,8 @@
         </iron-list>
       </div>
     </div>
-    <paper-tooltip id="tooltip" manual-mode position="top">
+    <paper-tooltip id="tooltip" fit-to-visible-bounds manual-mode
+        position="top">
       [[tooltipText_]]
     </paper-tooltip>
     <template is="dom-if" if="[[showEditExceptionDialog_]]" restamp>

chrome/browser/resources/settings/site_settings/site_list.js

@@ -242,8 +242,15 @@ Polymer({
     // potential targets. Since paper-tooltip does not expose a public property
     // or method to update the target, the private property |_target| is
     // updated directly.
-    this.$.tooltip._target = target;
-    /** @type {{updatePosition: Function}} */ (this.$.tooltip).updatePosition();
+    const tooltip = this.$.tooltip;
+    /** @type {{updatePosition: Function}} */ (tooltip).updatePosition();
+    tooltip._target = target;
+    const parentRect = tooltip.offsetParent.getBoundingClientRect();
+    const rect = tooltip.getBoundingClientRect();
+    if (parentRect.left + parentRect.width < rect.left + rect.width) {
+      tooltip.style.right = '0';
+      tooltip.style.left = 'auto';
+    }
     const hide = () => {
       this.$.tooltip.hide();
       target.removeEventListener('mouseleave', hide);