tooltip+popover: add boundary config option (#24979)

twbs · Dec 12, 2017 · 6f1e746 · 6f1e746
1 parent 8839c03
commit 6f1e746
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/docs/4.0/components/popovers.md b/docs/4.0/components/popovers.md
@@ -264,6 +264,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>Allow to specify which position Popper will use on fallback. For more information refer to
       Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
     </tr>
+    <tr>
+      <td>boundary</td>
+      <td>string | element</td>
+      <td>'scrollParent'</td>
+      <td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
+    </tr>
   </tbody>
 </table>
 

diff --git a/docs/4.0/components/tooltips.md b/docs/4.0/components/tooltips.md
@@ -244,6 +244,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>Allow to specify which position Popper will use on fallback. For more information refer to
       Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
     </tr>
+    <tr>
+      <td>boundary</td>
+      <td>string | element</td>
+      <td>'scrollParent'</td>
+      <td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
+    </tr>
   </tbody>
 </table>
 

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
@@ -38,7 +38,8 @@ const Tooltip = (($) => {
     placement           : '(string|function)',
     offset              : '(number|string)',
     container           : '(string|element|boolean)',
-    fallbackPlacement   : '(string|array)'
+    fallbackPlacement   : '(string|array)',
+    boundary            : '(string|element)'
   }
 
   const AttachmentMap = {
@@ -62,7 +63,8 @@ const Tooltip = (($) => {
     placement           : 'top',
     offset              : 0,
     container           : false,
-    fallbackPlacement   : 'flip'
+    fallbackPlacement   : 'flip',
+    boundary            : 'scrollParent'
   }
 
   const HoverState = {
@@ -301,6 +303,9 @@ const Tooltip = (($) => {
             },
             arrow: {
               element: Selector.ARROW
+            },
+            preventOverflow: {
+              boundariesElement: this.config.boundary
             }
           },
           onCreate: (data) => {