You can initialize Modal without writing any code as long as you have a modal and a trigger with data-target or a link with href referencing that modal. The component
will initialize for all elements with data-toggle="modal" found in the DOM.
<!-- provide a trigger button -->
<button id="myModalTrigger" type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
@@ -549,9 +550,9 @@ Modal title
Text in a modal
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Popover in a modal
- This button should trigger a popover on click.
+ This button should trigger a popover on click.
Tooltips in a modal
- This link and that link should have tooltips on hover.
+ This link and that link should have tooltips on hover.
Open modal from modal
Click here to open another modal.
@@ -1547,8 +1548,8 @@ Options
containerselector
or object
- <body>The container where your tooltips get appended to. This option is only for JavaScript initialization and is not fully implemented as the original.
+ <document.body>The container where your popovers get appended to. You can set the option via the data-container="#elementID" attribute or via JavaScript.
@@ -1778,8 +1779,8 @@ Options
containerselector
or object
- <body>The container where your popovers get appended to. This option is only for JavaScript initialization and is not fully implemented as the original.
+ <document.body>The container where your popovers get appended to. You can set the option via the data-container="#elementID" attribute or via JavaScript.
diff --git a/lib/popover-native.js b/lib/popover-native.js
index 5bb31b4e..afcdc43a 100644
--- a/lib/popover-native.js
+++ b/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]);
}
};
diff --git a/lib/tooltip-native.js b/lib/tooltip-native.js
index b102db27..f5de1a8b 100644
--- a/lib/tooltip-native.js
+++ b/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 () {
diff --git a/lib/utils.js b/lib/utils.js
index e5f17e1a..909d23e4 100644
--- a/lib/utils.js
+++ b/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] };
diff --git a/package.json b/package.json
index 9b74ecf1..428dfc5c 100644
--- a/package.json
+++ b/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": {