Implement container option for tooltips and popovers.

diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index b6dc451ec6cd932528af5bd785fe6734fac878a4..31fb2c1c7e34d88c821899ecefcc5067ec6332f1 100644 (file)
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -165,7 +165,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       </tr>
       <tr>
         <td>container</td>
-        <td>string | false</td>
+        <td>string | element | false</td>
         <td>false</td>
         <td>
           <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 822ae3652500d276b802c5f642cd3cf7ac794e87..94f77a2a4c7231ca5333b62c7f6518863d31f5e8 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -46,7 +46,8 @@ const Tooltip = (($) => {
     selector    : false,
     placement   : 'top',
     offset      : '0 0',
-    constraints : []
+    constraints : [],
+    container   : false
   }
 
   const DefaultType = {
@@ -59,7 +60,8 @@ const Tooltip = (($) => {
     selector    : '(string|boolean)',
     placement   : '(string|function)',
     offset      : 'string',
-    constraints : 'array'
+    constraints : 'array',
+    container   : '(string|element|boolean)'
   }
 
   const AttachmentMap = {
@@ -274,9 +276,11 @@ const Tooltip = (($) => {
 
         const attachment = this._getAttachment(placement)
 
+        const container = this.config.container === false ? document.body : $(this.config.container)
+
         $(tip)
           .data(this.constructor.DATA_KEY, this)
-          .appendTo(document.body)
+          .appendTo(container)
 
         $(this.element).trigger(this.constructor.Event.INSERTED)