Fix for #105

README.md

@@ -1,10 +1,10 @@
 # Native Javascript for Bootstrap
-This is a set of scripts developed with native Javascript for <strong>Bootstrap 3</strong> series, and featuring superior performance compared to the original jQuery Plugins. Thanks to [Ingwie Phoenix](https://github.com/IngwiePhoenix) for contributing with npm/RequireJS/CommonJS compatibility. A huge advantage is the size, this library is only ***20Kb*** minified and ***6.5Kb*** gZipped.
+This is a library developed with native Javascript for <strong>Bootstrap 3</strong> series, and featuring superior performance compared to the original jQuery Plugins. Thanks to [Ingwie Phoenix](https://github.com/IngwiePhoenix) for contributing with npm/RequireJS/CommonJS compatibility. A huge advantage is the size, this library is only ***20Kb*** minified and ***6.5Kb*** gZipped.
 
 See <a href="http://thednp.github.io/bootstrap.native/">demo</a> for scripting examples and instructions.
 
 # CDN
-New releases will be available automatically on <a href="http://www.jsdelivr.com/#!bootstrap.native">jsdelivr</a> CDN repositories and <a href="https://cdnjs.com/libraries/bootstrap.native">CDNjs</a> repositories. You may also find more <a href="https://www.google.ro/search?q=bootstrap+js+without+jquery" target="_blank">CDN repositories on Google</a> as well.
+New releases will be available automatically on <a href="http://www.jsdelivr.com/#!bootstrap.native">jsdelivr</a> CDN repositories and CDN repositories on <a href="https://cdnjs.com/libraries/bootstrap.native">CDNjs</a> repositories. You may also find more <a href="https://www.google.com/search?q=bootstrap+native+cdn" target="_blank">Google</a> as well.
 
 # Bower and NPM
 You can install this package by using either Bower or NPM.
@@ -50,7 +50,7 @@ As mentioned above, the object properties of the exported object, when using `re
 So when using `bootstrap.native` inside of a NodeJS app, make sure you create a proper Browser-like environment first to avoid unexpected behaviour.
 
 # Browser Support
-The scripts are developed with clean code mainly for modern browsers that nativelly support HTML5. When using polyfills, IE8-IE9 will thank you.
+The components are developed with clean code mainly for modern browsers that nativelly support HTML5. When using polyfills, IE8-IE9 will thank you.
 
 # Custom Builds
 You can make a custom build of bootstrap-native, including only the modules you need, by using the `build.js` script.
@@ -78,4 +78,4 @@ Writes to stdout
 - Full contributors list [here](https://github.com/thednp/bootstrap.native/graphs/contributors). Thanks so much!
 
 # License
-The scripts are released under the [MIT license](https://github.com/thednp/bootstrap.native/blob/master/LICENSE).
+The library is released under the [MIT license](https://github.com/thednp/bootstrap.native/blob/master/LICENSE).

assets/js/scripts.js

@@ -53,7 +53,7 @@ btnModalNotTrigger.addEventListener('click', function(e) {
 
 // NEW added events to Modal
 modalFrame.addEventListener('show.bs.modal', function(e) {
-	var related = null; console.log(e)
+	var related = null;
 	related = ', relatedTarget: '+ (e.relatedTarget ?  e.relatedTarget.tagName + '.'+e.relatedTarget.className.replace(/\s/g,'.') : 'null');
 	console.log( 'The "show.bs.modal" event fired for #' + e.target.id + related ); 
 }, false);

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap.native",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "homepage": "http://thednp.github.io/bootstrap.native/",
   "authors": [
     "dnp_theme"

dist/bootstrap-native.js

@@ -1,4 +1,4 @@
-// Native Javascript for Bootstrap 3 v2.0.0 | © dnp_theme | MIT-License
+// Native Javascript for Bootstrap 3 v2.0.1 | © dnp_theme | MIT-License
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD support:
@@ -65,6 +65,7 @@
     dataDismissible   = 'data-dismissible',
     dataTrigger       = 'data-trigger',
     dataAnimation     = 'data-animation',
+    dataContainer     = 'data-container',
     dataPlacement     = 'data-placement',
     dataDelay         = 'data-delay',
     dataOffsetTop     = 'data-offset-top',
@@ -78,6 +79,7 @@
 
     // box model
     offsetTop    = 'offsetTop',      offsetBottom   = 'offsetBottom',
+    offsetLeft   = 'offsetLeft',
     scrollTop    = 'scrollTop',      scrollLeft     = 'scrollLeft',
     clientWidth  = 'clientWidth',    clientHeight   = 'clientHeight',
     offsetWidth  = 'offsetWidth',    offsetHeight   = 'offsetHeight',
@@ -237,8 +239,9 @@
         x : global.pageXOffset || doc[scrollLeft]
       }
     },
-    styleTip = function(link,element,position) { // both popovers and tooltips
-      var rect = link[getBoundingClientRect](), scroll = getScroll(),
+      styleTip = function(link,element,position,container) { // both popovers and tooltips
+        var rect = link[getBoundingClientRect](), 
+            scroll = container === body ? getScroll() : { x: container[offsetLeft] + container[scrollLeft], y: container[offsetTop] + container[scrollTop] },
           linkDimensions = { w: rect[right] - rect[left], h: rect[bottom] - rect[top] },
           elementDimensions = { w : element[offsetWidth], h: element[offsetHeight] };
 
@@ -1211,6 +1214,7 @@
         placementData = element[getAttribute](dataPlacement),
         dismissibleData = element[getAttribute](dataDismissible),
         delayData = element[getAttribute](dataDelay),
+        containerData = element[getAttribute](dataContainer),
 
         // internal strings
         component = 'popover',
@@ -1235,7 +1239,7 @@
     this[delay] = parseInt(options[delay] || delayData) || 100;
     this[dismissible] = options[dismissible] || dismissibleData === 'true' ? true : false;
     this[duration] = (isIE && isIE < 10) ? 0 : parseInt(options[duration] || durationData) || 150;
-    this[container] = queryElement(options[container]) || body; // JavaScript only
+    this[container] = queryElement(options[container]) || queryElement(containerData) || body;
 
     // bind, content
     var self = this, 
@@ -1299,10 +1303,10 @@
         !hasClass(popover,'in') && ( addClass(popover,'in') );
       },
       updatePopover = function() {
-        styleTip(element,popover,placementSetting);
+        styleTip(element,popover,placementSetting,self[container]);
         if (!isElementInViewport(popover) ) { 
           placementSetting = updatePlacement(placementSetting); 
-          styleTip(element,popover,placementSetting); 
+          styleTip(element,popover,placementSetting,self[container]); 
         }
       };
 
@@ -1586,6 +1590,7 @@
         placementData = element[getAttribute](dataPlacement);
         durationData = element[getAttribute](dataDuration);
         delayData = element[getAttribute](dataDelay),
+        containerData = element[getAttribute](dataContainer),
 
         // strings
         component = 'tooltip',
@@ -1600,7 +1605,7 @@
     this[placement] = options[placement] ? options[placement] : placementData || top;
     this[delay] = parseInt(options[delay] || delayData) || 100;
     this[duration] = (isIE && isIE < 10) ? 0 : parseInt(options[duration] || durationData) || 150;
-    this[container] = queryElement(options[container]) || body; // JavaScript only
+    this[container] = queryElement(options[container]) || queryElement(containerData) || body;
 
     // bind, event targets, title and constants
     var self = this, timer = 0, placementSetting = this[placement], tooltip = null,
@@ -1629,10 +1634,10 @@
         tooltip[setAttribute](classString, component + ' ' + placementSetting + ' ' + self[animation]);
       },
       updateTooltip = function () {
-        styleTip(element,tooltip,placementSetting);
+        styleTip(element,tooltip,placementSetting,self[container]);
         if (!isElementInViewport(tooltip) ) { 
           placementSetting = updatePlacement(placementSetting); 
-          styleTip(element,tooltip,placementSetting); 
+          styleTip(element,tooltip,placementSetting,self[container]); 
         }
       },
       showTooltip = function () {

index.html

@@ -393,6 +393,7 @@ <h4>Usage</h4>
               <h5 id="modalDataAPI">Via DATA API</h5>
               <p>You can initialize <b>Modal</b> without writing any code as long as you have a modal and a trigger with <code>data-target</code> or a link with <code>href</code> referencing that modal. The component 
                 will initialize for all elements with <code>data-toggle="modal"</code> found in the DOM.</p>
+
 <pre><code class="language-markup">&lt;!-- provide a trigger button --&gt;
 &lt;button id="myModalTrigger" type="button" data-toggle="modal" data-target="#myModal"&gt;Launch modal&lt;/button&gt;
 
@@ -549,9 +550,9 @@ <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                       <h4>Text in a modal</h4> 
                       <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                       <h4>Popover in a modal</h4>
-                      <p>This <a href="#" style="margin:-5px 0 0 0" role="button" data-toggle="popover" class="btn btn-default popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-title="A Title">button</a> should trigger a popover on click.</p>
+                      <p>This <a href="#" style="margin:-5px 0 0 0" role="button" data-toggle="popover" data-container="#myModal" class="btn btn-default popover-test" data-content="And here's some amazing content. It's very engaging. right?" data-title="A Title">button</a> should trigger a popover on click.</p>
                       <h4>Tooltips in a modal</h4>
-                      <p><a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-toggle="tooltip" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
+                      <p><a href="#" class="tooltip-test" data-toggle="tooltip" data-container="#myModal" title="Tooltip">This link</a> and <a href="#" data-container="#myModal" data-toggle="tooltip" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
                       <h4>Open modal from modal</h4>
                       <p>Click <a data-toggle="modal" href="#anotherModal">here</a> to open another modal.</p>
                       <hr>
@@ -1547,8 +1548,8 @@ <h4>Options</h4>
                   <tr>
                     <td><code>container</code></td>
                     <td><em>selector</em><br>or <em>object</em></td>
-                    <td><code>&lt;body&gt;</code></td>
-                    <td>The container where your tooltips get appended to. This option is only for JavaScript initialization and is not fully implemented as the original.</td>
+                    <td><code>&lt;document.body&gt;</code></td>
+                    <td>The container where your popovers get appended to. You can set the option via the <code>data-container="#elementID"</code> attribute or via JavaScript.</td>
                   </tr>
                 </tbody>
               </table>
@@ -1778,8 +1779,8 @@ <h4>Options</h4>
                   <tr>
                     <td><code>container</code></td>
                     <td><em>selector</em><br>or <em>object</em></td>
-                    <td><code>&lt;body&gt;</code></td>
-                    <td>The container where your popovers get appended to. This option is only for JavaScript initialization and is not fully implemented as the original.</td>
+                    <td><code>&lt;document.body&gt;</code></td>
+                    <td>The container where your popovers get appended to. You can set the option via the <code>data-container="#elementID"</code> attribute or via JavaScript.</td>
                   </tr>
                 </tbody>
               </table>

lib/popover-native.js

@@ -16,6 +16,7 @@ var Popover = function( element, options ) {
       placementData = element[getAttribute](dataPlacement),
       dismissibleData = element[getAttribute](dataDismissible),
       delayData = element[getAttribute](dataDelay),
+      containerData = element[getAttribute](dataContainer),
 
       // internal strings
       component = 'popover',
@@ -40,7 +41,7 @@ var Popover = function( element, options ) {
   this[delay] = parseInt(options[delay] || delayData) || 100;
   this[dismissible] = options[dismissible] || dismissibleData === 'true' ? true : false;
   this[duration] = (isIE && isIE < 10) ? 0 : parseInt(options[duration] || durationData) || 150;
-  this[container] = queryElement(options[container]) || body; // JavaScript only
+  this[container] = queryElement(options[container]) || queryElement(containerData) || body;
 
   // bind, content
   var self = this, 
@@ -104,10 +105,10 @@ var Popover = function( element, options ) {
       !hasClass(popover,'in') && ( addClass(popover,'in') );
     },
     updatePopover = function() {
-      styleTip(element,popover,placementSetting);
+      styleTip(element,popover,placementSetting,self[container]);
       if (!isElementInViewport(popover) ) { 
         placementSetting = updatePlacement(placementSetting); 
-        styleTip(element,popover,placementSetting); 
+        styleTip(element,popover,placementSetting,self[container]); 
       }
     };
 

lib/tooltip-native.js

@@ -14,6 +14,7 @@ var Tooltip = function( element,options ) {
       placementData = element[getAttribute](dataPlacement);
       durationData = element[getAttribute](dataDuration);
       delayData = element[getAttribute](dataDelay),
+      containerData = element[getAttribute](dataContainer),
 
       // strings
       component = 'tooltip',
@@ -28,7 +29,7 @@ var Tooltip = function( element,options ) {
   this[placement] = options[placement] ? options[placement] : placementData || top;
   this[delay] = parseInt(options[delay] || delayData) || 100;
   this[duration] = (isIE && isIE < 10) ? 0 : parseInt(options[duration] || durationData) || 150;
-  this[container] = queryElement(options[container]) || body; // JavaScript only
+  this[container] = queryElement(options[container]) || queryElement(containerData) || body;
 
   // bind, event targets, title and constants
   var self = this, timer = 0, placementSetting = this[placement], tooltip = null,
@@ -57,10 +58,10 @@ var Tooltip = function( element,options ) {
       tooltip[setAttribute](classString, component + ' ' + placementSetting + ' ' + self[animation]);
     },
     updateTooltip = function () {
-      styleTip(element,tooltip,placementSetting);
+      styleTip(element,tooltip,placementSetting,self[container]);
       if (!isElementInViewport(tooltip) ) { 
         placementSetting = updatePlacement(placementSetting); 
-        styleTip(element,tooltip,placementSetting); 
+        styleTip(element,tooltip,placementSetting,self[container]); 
       }
     },
     showTooltip = function () {

lib/utils.js

@@ -41,6 +41,7 @@ var global = typeof global !== 'undefined' ? global : this||window,
   dataDismissible   = 'data-dismissible',
   dataTrigger       = 'data-trigger',
   dataAnimation     = 'data-animation',
+  dataContainer     = 'data-container',
   dataPlacement     = 'data-placement',
   dataDelay         = 'data-delay',
   dataOffsetTop     = 'data-offset-top',
@@ -54,6 +55,7 @@ var global = typeof global !== 'undefined' ? global : this||window,
 
   // box model
   offsetTop    = 'offsetTop',      offsetBottom   = 'offsetBottom',
+  offsetLeft   = 'offsetLeft',
   scrollTop    = 'scrollTop',      scrollLeft     = 'scrollLeft',
   clientWidth  = 'clientWidth',    clientHeight   = 'clientHeight',
   offsetWidth  = 'offsetWidth',    offsetHeight   = 'offsetHeight',
@@ -213,8 +215,9 @@ var global = typeof global !== 'undefined' ? global : this||window,
       x : global.pageXOffset || doc[scrollLeft]
     }
   },
-  styleTip = function(link,element,position) { // both popovers and tooltips
-    var rect = link[getBoundingClientRect](), scroll = getScroll(),
+    styleTip = function(link,element,position,container) { // both popovers and tooltips
+      var rect = link[getBoundingClientRect](), 
+          scroll = container === body ? getScroll() : { x: container[offsetLeft] + container[scrollLeft], y: container[offsetTop] + container[scrollTop] },
         linkDimensions = { w: rect[right] - rect[left], h: rect[bottom] - rect[top] },
         elementDimensions = { w : element[offsetWidth], h: element[offsetHeight] };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap.native",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Native Javascript for Bootstrap 3, the sweetest Javascript library without jQuery.",
   "main": "dist/bootstrap-native.js",
   "scripts": {