bootstrap-vue · tmorehouse · Sep 2, 2017 · Sep 1, 2017 · Sep 1, 2017 · Sep 1, 2017
diff --git a/docs/components/popover/README.md b/docs/components/popover/README.md
@@ -3,17 +3,26 @@
 > The Popover feature, which provides a tooltip-like behavior, can be easily applied to any interactive
 element via the `<b-popover>` component or [`v-b-popover`](/docs/directives/popover) directive.
 
+```html
+<div class="text-center my-3">
+  <b-btn v-b-popover.hover.auto="'I am popover content!'" title="Popover Title">Hover Me</b-btn>
+</div>
+
+<!-- popover-example-1.vue -->
+```
+
 ## Overview
 
 Things to know when using popover component:
  - Popovers rely on the 3rd party library Popper.js for positioning. The library is bundled with Bootstrap-Vue dist files!
  - Popovers with zero-length title _and_ content are never displayed.
+ - Specify `container` as `null` (default, appends to `<body>`) to avoid rendering problems in more complex components (like input groups, button groups, etc). You can use `container` to optionally specify a different element to append the popover to.
  - Triggering popovers on hidden elements will not work.
  - Popovers for `disabled` elements must be triggered on a wrapper element.
  - When triggered from hyperlinks that span multiple lines, popovers will be centered. Use `white-space: nowrap;` on your `<a>`s, `<b-link>`s and `<router-link>`s to avoid this behavior.
  - Popovers must be hidden before their corresponding markup elements have been removed from the DOM.
 
-The `<b-popover>` component inserts a hidden (`display: none;`) `<div>` container
+The `<b-popover>` component inserts a hidden (`display: none;`) `<div>` intermediate container
 element at the point in the DOM where the `<b-popover>` component is placed.  This may 
 affect layout and/or styling of components such as `<b-button-group>`, `<b-button-toolbar>`,
 and `<b-input-group>`. To avoid these posible layout issues, place the `<b-popover>`
@@ -85,11 +94,12 @@ using the `v-b-popover` directive and enable the `html` modifer if needed._
 | `target` | `null` | String ID of element, or a reference to an element or component, that you want to trigger the popover. **Required** | Any valid, in-document unique element ID, or in-document element/component reference
 | `title` | `null` | Title of popover (text only, no HTML). if HTML is required, place it in the `title` named slot | Plain text
 | `content` | `null` | Content of popover (text only, no HTML). if HTML is required, place it in the default slot | Plain text
-| `placement` | `top` | Positioning of the popover, relative to the trigger element. | `top`, `bottom`, `left`, `right`, `auto`
-| `triggers` | `click` |  Space separated list of which event(s) will trigger open/close of popover | `hover`, `focus`, `click`. Note `blur` is a special use case to close popover on next click.
+| `placement` | `'top'` | Positioning of the popover, relative to the trigger element. | `top`, `bottom`, `left`, `right`, `auto`
+| `triggers` | `'click'` |  Space separated list of which event(s) will trigger open/close of popover | `hover`, `focus`, `click`. Note `blur` is a special use case to close popover on next click.
 | `no-fade` | `false` | Disable fade animation when set to `true` | `true` or `false`
 | `delay` | `0` | Number of milliseconds to delay showing and hidding of popover | `0` and up, integers only.
 | `offset` | `0` | Number of pixels to shift the center of the popover. Also affects the position of the popover arrow. | Any negative or positive integer
+| `container` | `null` | String ID of element to append rendered popover into. If `null` or element not found, popover is appended to `<body>` (default) | Any valid in-document unique  element ID.
 
 
 ## `v-b-popover` Directive usage
@@ -151,7 +161,7 @@ small screens can be harder to deal with on mobile devices (such as smart-phones
 
 ```html
 <template>
-  <div>
+  <div id="myContainer">
     <div class="my-3">
       <!-- our triggering (target) element -->
       <b-btn id="exPopoverReactive1"
@@ -172,9 +182,11 @@ small screens can be harder to deal with on mobile devices (such as smart-phones
 
     <!-- Our popover title and content render container -->
     <!-- We use placement 'auto' so popover fits in the best spot on viewport -->
+    <!-- We specify the same container as teh trigger button, so that popover is close to button in tab sequence -->
     <b-popover target="exPopoverReactive1"
                triggers="click"
                placement="auto"
+               container="myContainer"
                ref="popover"
                @show="onShow"
                @shown="onShown"

diff --git a/docs/components/tooltip/README.md b/docs/components/tooltip/README.md
@@ -3,17 +3,26 @@
 > Easily add tooltips to elements or components via the `<b-tooltip>` component or
 [`v-b-tooltip`](/docs/directives/tooltip) directive (preferred method).
 
+```html
+<div class="text-center my-3">
+  <b-btn v-b-tooltip.hover.auto title="I'm a tooltip!">Hover Me</b-btn>
+</div>
+
+<!-- tooltip-example-1.vue -->
+```
+
 ## Overview
 
 Things to know when using tooltip component:
  - Tooltips rely on the 3rd party library Popper.js for positioning. The library is bundled with Bootstrap-Vue in the dist files!
  - Tooltips with zero-length titles are never displayed.
  - Triggering tooltips on hidden elements will not work.
+ - Specify `container` as `null` (default, appends to `<body>`) to avoid rendering problems in more complex components (like input groups, button groups, etc). You can use container to optionally specify a different element to append the rendered tooltip to.
  - Tooltips for `disabled` elements must be triggered on a wrapper element.
  - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your `<a>`s, `<b-link>`s and `<router-link>`s to avoid this behavior.
  - Tooltips must be hidden before their corresponding elements have been removed from the DOM.
 
-The `<b-tooltip` component inserts a hidden (`display:none`) `<div>` container
+The `<b-tooltip` component inserts a hidden (`display:none`) `<div>` intermediate container
 element at the point in the DOM where the `<b-tooltip>` component is placed.  This may 
 affect layout and/or styling of components such as `<b-button-group>`, `<b-button-toolbar>`,
 and `<b-input-group>`. To avoid these posible layout issues, place the `<b-tooltip>`
@@ -66,6 +75,8 @@ prop does not have this behavior. For simple tooltips, we recommend using the
 | `no-fade` | `false` | Disable fade animation when set to `true` | `true` or `false`
 | `delay` | `0` | Number of milliseconds to delay showing and hidding of tooltip | `0` and up, integers only.
 | `offset` | `0` | Number of pixels to shift the center of the tooltip | Any negative or positive integer
+| `container` | `null` | String ID of element to append rendered tooltip into. If `null` or element not found, tooltip is appended to `<body>` (default) | Any valid in-document unique  element ID.
+
 
 
 ## `v-b-tooltip` Directive Usage

diff --git a/lib/components/popover.vue b/lib/components/popover.vue
@@ -50,6 +50,11 @@
             noFade: {
                 type: Boolean,
                 default: false
+            },
+            container: {
+                // String ID of container, if null body is used (default)
+                type: String,
+                default: null
             }
         },
         mounted() {
@@ -98,10 +103,13 @@
         },
         computed: {
             baseConfig() {
+                const cont = this.container;
                 return {
                     title: this.title.trim() || '',
                     content: this.content.trim() || '',
                     placement: this.placement || 'top',
+                    // container currently needs to be an ID with '#' prepended, or false for body
+                    container: cont ? (/^#/.test(cont) ? cont : `#${cont}`) : false,
                     delay: parseInt(this.delay, 10) || 0,
                     // offset can be a css distance string. if no units provided then pixels are assumed
                     offset: this.offset || 0,

diff --git a/lib/components/tooltip.vue b/lib/components/tooltip.vue
@@ -45,6 +45,11 @@
             noFade: {
                 type: Boolean,
                 default: false
+            },
+            container: {
+                // String ID of container, if null body is used (default)
+                type: String,
+                default: null
             }
         },
         mounted() {
@@ -92,9 +97,12 @@
         },
         computed: {
             baseConfig() {
+            const cont = this.container;
                 return {
                     title: this.title.trim() || '',
                     placement: this.placement || 'top',
+                    // Container curently needs to be an ID with '#' prepended, if null then body is used
+                    container: cont ? (/^#/.test(cont) ? cont : `#${cont}`) : false,
                     delay: parseInt(this.delay, 10) || 0,
                     // Offset can be css distance. if no units, pixels are assumed
                     offset: this.offset || 0,