diff options
| -rw-r--r-- | example/index.html | 2 | ||||
| -rw-r--r-- | sass/ns-popover.scss | 12 | ||||
| -rw-r--r-- | src/nsPopover.js | 47 |
3 files changed, 54 insertions, 7 deletions
diff --git a/example/index.html b/example/index.html index 8460374..0cdf570 100644 --- a/example/index.html +++ b/example/index.html @@ -51,7 +51,7 @@ <button ns-popover
ns-popover-template="tooltip"
ns-popover-trigger="click"
- ns-popover-placement="left"
+ ns-popover-placement="bottom|right"
ns-popover-theme="ns-popover-tooltip-theme">
Popover on left
</button>
diff --git a/sass/ns-popover.scss b/sass/ns-popover.scss index 72b0755..b38fe9d 100644 --- a/sass/ns-popover.scss +++ b/sass/ns-popover.scss @@ -163,4 +163,16 @@ $popover-triangle-border-color: $popover-border-color !default; @include triangle("left");
}
}
+
+ &.ns-popover-left-align {
+ .ns-popover-tooltip {
+ margin-left: 0;
+ }
+ }
+
+ &.ns-popover-right-align {
+ .ns-popover-tooltip {
+ margin-right: 0;
+ }
+ }
}
\ No newline at end of file diff --git a/src/nsPopover.js b/src/nsPopover.js index 738ccbf..f55aad9 100644 --- a/src/nsPopover.js +++ b/src/nsPopover.js @@ -74,6 +74,7 @@ }
var $popover = $el('<div></div>');
+ var $triangle;
var placement_;
var align_;
@@ -118,6 +119,26 @@ .css('position', 'absolute')
.css('display', 'none');
+ // When the tooltip style is used we need to position the triangle in the
+ // center of the triggering element. We try first to find the elements that
+ // has the |triangle| class using the find method, hoping that the full jquery
+ // library is in use.
+ $triangle = $popover.find('.triangle');
+
+ // If the element is not found through the use of its class we will assume
+ // that the full jquery library is not in use and will try to find the
+ // triangle by inspecting each child of the |popover|.
+ if (!$triangle.length) {
+ var children = $popover.children();
+ for(var i = 0; i < children.length; ++i) {
+ var triangle = $el(children[i]);
+ if (triangle.hasClass('triangle')) {
+ $triangle = triangle;
+ break;
+ }
+ }
+ }
+
$container.append($popover);
});
@@ -130,7 +151,7 @@ // position the popover accordingly to the defined placement around the
// |elm|.
- move($popover, placement_, align_, getBoundingClientRect(elm[0]));
+ move($popover, placement_, align_, getBoundingClientRect(elm[0]), $triangle);
// Hide the popover without delay on click events.
$popover.on('click', function() {
@@ -155,18 +176,21 @@ *
* @param popover {Object} The popover object to be moved.
* @param placement {String} The relative position to move the popover - top | bottom | left | right.
+ * @param align {String} The way the popover should be aligned - center | left | right.
* @param rect {ClientRect} The ClientRect of the object to move the popover around.
+ * @param triangle {Object} The element that contains the popover's triangle. This can be null.
*/
- function move(popover, placement, align, rect) {
+ function move(popover, placement, align, rect, triangle) {
var popoverRect = getBoundingClientRect(popover[0]);
var top, left;
var positionX = function() {
if (align === 'center') {
return Math.round(rect.left + rect.width/2 - popoverRect.width/2);
- } else {
- return rect[align];
+ } else if(align === 'right') {
+ return rect.right - popoverRect.width;
}
+ return rect.left;
};
var positionY = function() {
@@ -185,14 +209,25 @@ left = rect.right +1;
} else if (placement === 'bottom') {
top = rect.bottom + 1;
- left = positionX(align);
+ left = positionX();
} else if (placement === 'left') {
- top = positionY(align);
+ top = positionY();
left = rect.left - popoverRect.width - 1;
}
+
popover
.css('top', top.toString() + 'px')
.css('left', left.toString() + 'px');
+
+ if (triangle) {
+ if (placement === 'top' || placement === 'bottom') {
+ left = rect.left + rect.width / 2 - left;
+ triangle.css('left', left.toString() + 'px');
+ } else {
+ top = rect.top + rect.height / 2 - top;
+ triangle.css('top', + 'px');
+ }
+ }
}
function getBoundingClientRect(elm) {
|