fixes tooltip insert problems

Created by: Yohn

This adds a container option to the tooltip that can be called via html5 - data-container="body" or javascript - $().tooltip({container: 'body'})

if no container is given then it will get the default insertAfter() strategy

This fixes a number of bugs that were introduced when we changed the appendTo() to insertAfter()

If the tooltips are within a modal, and are inheriting its parents styles, then use $().tooltip({container: '#modalID'})

thanks to @WilliamStam and @blakeembrey for helping with this solution

some issues that noticed this bug #5687 (closed) #6254 (closed) #6314 (closed) #6283 (closed) #6275 (closed) #6250 (closed) #6240 (closed) #6236 (closed) along with a lot more..

this is another resubmit of this.. previous pull request - #6321 with some tweaks to work with the 2.3 branch.

docs/templates/pages/javascript.mustache

@@ -779,6 +779,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                 <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
                </td>
              </tr>
+             <tr>
+               <td>{{_i}}container{{/i}}</td>
+               <td>{{_i}}string | false{{/i}}</td>
+               <td>{{_i}}false{{/i}}</td>
+               <td>
+                <p>{{_i}}Appends the tooltip to a specific element <code>container: 'body'</code>{{/i}}</p>
+               </td>
+             </tr>
             </tbody>
           </table>
           <div class="alert alert-info">

docs/javascript.html

@@ -849,6 +849,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                 <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
                </td>
              </tr>
+             <tr>
+               <td>container</td>
+               <td>string | false</td>
+               <td>false</td>
+               <td>
+                <p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
+               </td>
+             </tr>
             </tbody>
           </table>
           <div class="alert alert-info">

js/tests/unit/bootstrap-tooltip.js

@@ -164,4 +164,14 @@ $(function () {
           .tooltip('toggle')
         ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in')
       })
+
+      test("should place tooltips inside the body", function () {
+        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
+          .appendTo('#qunit-fixture')
+          .tooltip({container:'body'})
+          .tooltip('show')
+        ok($("body > .tooltip").length, 'inside the body')
+        ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
+        tooltip.tooltip('hide')
+      })
 })

js/bootstrap-tooltip.js

@@ -126,7 +126,8 @@
         $tip
           .detach()
           .css({ top: 0, left: 0, display: 'block' })
-          .insertAfter(this.$element)
+
+        this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
 
         pos = this.getPosition()
 
@@ -279,6 +280,7 @@
   , title: ''
   , delay: 0
   , html: false
+  , container: false
   }