<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<script data-require="angular-translate@*" data-semver="2.6.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.6.0/angular-translate.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="ns-popover.css" />
<script src="ns-popover.js"></script>
<script src="script.js"></script>
</head>
<body>
<h3>Popover <span class="more-info" ns-popover
ns-popover-template="help"
ns-popover-trigger="mouseenter"
ns-popover-placement="bottom|left"
ns-popover-theme="ns-popover-help-theme-large"
ns-popover-timeout="1">normally</span></h3>
<br/><br/><br/><br/><br/><br/>
<h3 translate="INLINE"></h3>
<script type="text/ng-template" id="help">
<div class="ns-popover-container">
<h6>Help Title</h6>
<p>Some useful info</p>
</div>
</script>
</body>
</html>
(function() {
'use strict';
angular.module('app', [
'pascalprecht.translate',
'nsPopover'
])
.config(['$translateProvider', function($translateProvider) {
$translateProvider.translations('en', {
INLINE: 'Popover <span class="more-info" ns-popover ns-popover-template="help" ns-popover-trigger="mouseenter" ns-popover-placement="bottom|left" ns-popover-theme="ns-popover-help-theme-large" ns-popover-timeout="1">inline</span>'
});
$translateProvider.useSanitizeValueStrategy('sanitizeParameters');
$translateProvider.preferredLanguage('en');
}]);
})();
.more-info {
border-bottom: 1px dotted;
cursor: help;
font-weight: 400;
}
.body {
font-family: "Lato", "Helvetica Neue", helvetica, arial, sans-serif;;
}
(function(window, angular, undefined){
'use strict';
var module = angular.module('nsPopover', []);
var $el = angular.element;
var isDef = angular.isDefined;
var $popovers = [];
var globalId = 0;
module.provider('nsPopover', function () {
var defaults = {
template: '',
theme: 'ns-popover-list-theme',
plain: 'false',
trigger: 'click',
triggerPrevent: true,
angularEvent: '',
scopeEvent: '',
container: 'body',
placement: 'bottom|left',
timeout: 1.5,
hideOnInsideClick: false,
hideOnOutsideClick: true,
hideOnButtonClick: true,
mouseRelative: '',
popupDelay: 0
};
this.setDefaults = function(newDefaults) {
angular.extend(defaults, newDefaults);
};
this.$get = function () {
return {
getDefaults: function () {
return defaults;
}
};
};
});
module.directive('nsPopover', ['nsPopover','$rootScope','$timeout','$templateCache','$q','$http','$compile','$document','$parse',
function(nsPopover, $rootScope, $timeout, $templateCache, $q, $http, $compile, $document, $parse) {
return {
restrict: 'A',
scope: true,
link: function(scope, elm, attrs) {
var defaults = nsPopover.getDefaults();
var options = {
template: attrs.nsPopoverTemplate || defaults.template,
theme: attrs.nsPopoverTheme || defaults.theme,
plain: toBoolean(attrs.nsPopoverPlain || defaults.plain),
trigger: attrs.nsPopoverTrigger || defaults.trigger,
triggerPrevent: attrs.nsPopoverTriggerPrevent || defaults.triggerPrevent,
angularEvent: attrs.nsPopoverAngularEvent || defaults.angularEvent,
scopeEvent: attrs.nsPopoverScopeEvent || defaults.scopeEvent,
container: attrs.nsPopoverContainer || defaults.container,
placement: attrs.nsPopoverPlacement || defaults.placement,
timeout: attrs.nsPopoverTimeout || defaults.timeout,
hideOnInsideClick: toBoolean(attrs.nsPopoverHideOnInsideClick || defaults.hideOnInsideClick),
hideOnOutsideClick: toBoolean(attrs.nsPopoverHideOnOutsideClick || defaults.hideOnOutsideClick),
hideOnButtonClick: toBoolean(attrs.nsPopoverHideOnButtonClick || defaults.hideOnButtonClick),
mouseRelative: attrs.nsPopoverMouseRelative,
popupDelay: attrs.nsPopoverPopupDelay || defaults.popupDelay,
group: attrs.nsPopoverGroup
};
if (options.mouseRelative) {
options.mouseRelativeX = options.mouseRelative.indexOf('x') !== -1;
options.mouseRelativeY = options.mouseRelative.indexOf('y') !== -1;
}
var displayer_ = {
id_: undefined,
/**
* Set the display property of the popover to 'block' after |delay| milliseconds.
*
* @param delay {Number} The time (in seconds) to wait before set the display property.
* @param e {Event} The event which caused the popover to be shown.
*/
display: function(delay, e) {
// Disable popover if ns-popover value is false
if ($parse(attrs.nsPopover)(scope) === false) {
return;
}
$timeout.cancel(displayer_.id_);
if (!isDef(delay)) {
delay = 0;
}
// hide any popovers being displayed
if (options.group) {
$rootScope.$broadcast('ns:popover:hide', options.group);
}
displayer_.id_ = $timeout(function() {
$popover.isOpen = true;
$popover.css('display', 'block');
// position the popover accordingly to the defined placement around the
// |elm|.
var elmRect = getBoundingClientRect(elm[0]);
// If the mouse-relative options is specified we need to adjust the
// element client rect to the current mouse coordinates.
if (options.mouseRelative) {
elmRect = adjustRect(elmRect, options.mouseRelativeX, options.mouseRelativeY, e);
}
move($popover, placement_, align_, elmRect, $triangle);
if (options.hideOnInsideClick) {
// Hide the popover without delay on the popover click events.
$popover.on('click', insideClickHandler);
}
if (options.hideOnOutsideClick) {
// Hide the popover without delay on outside click events.
$document.on('click', outsideClickHandler);
}
if (options.hideOnButtonClick) {
// Hide the popover without delay on the button click events.
elm.on('click', buttonClickHandler);
}
}, delay*1000);
},
cancel: function() {
$timeout.cancel(displayer_.id_);
}
};
var hider_ = {
id_: undefined,
/**
* Set the display property of the popover to 'none' after |delay| milliseconds.
*
* @param delay {Number} The time (in seconds) to wait before set the display property.
*/
hide: function(delay) {
$timeout.cancel(hider_.id_);
// delay the hiding operation for 1.5s by default.
if (!isDef(delay)) {
delay = 1.5;
}
hider_.id_ = $timeout(function() {
$popover.off('click', insideClickHandler);
$document.off('click', outsideClickHandler);
elm.off('click', buttonClickHandler);
$popover.isOpen = false;
displayer_.cancel();
$popover.css('display', 'none');
}, delay*1000);
},
cancel: function() {
$timeout.cancel(hider_.id_);
}
};
var $container = $document.find(options.container);
if (!$container.length) {
$container = $document.find('body');
}
var $triangle;
var placement_;
var align_;
globalId += 1;
var $popover = $el('<div id="nspopover-' + globalId +'"></div>');
$popovers.push($popover);
var match = options.placement
.match(/^(top|bottom|left|right)$|((top|bottom)\|(center|left|right)+)|((left|right)\|(center|top|bottom)+)/);
if (!match) {
throw new Error('"' + options.placement + '" is not a valid placement or has a invalid combination of placements.');
}
placement_ = match[6] || match[3] || match[1];
align_ = match[7] || match[4] || match[2] || 'center';
$q.when(loadTemplate(options.template, options.plain)).then(function(template) {
template = angular.isString(template) ?
template :
template.data && angular.isString(template.data) ?
template.data :
'';
$popover.html(template);
if (options.theme) {
$popover.addClass(options.theme);
}
// Add classes that identifies the placement and alignment of the popver
// which allows the customization of the popover based on its position.
$popover
.addClass('ns-popover-' + placement_ + '-placement')
.addClass('ns-popover-' + align_ + '-align');
$compile($popover)(scope);
scope.$on('$destroy', function() {
$popover.remove();
});
scope.hidePopover = function() {
hider_.hide(0);
};
scope.$on('ns:popover:hide', function(ev, group) {
if (options.group === group) {
scope.hidePopover();
}
});
$popover
.css('position', 'absolute')
.css('display', 'none');
//search for the triangle element - works in ie8+
$triangle = $popover[0].querySelectorAll('.triangle');
//if the element is found, then convert it to an angular element
if($triangle.length){
$triangle = $el($triangle);
}
$container.append($popover);
});
if (options.angularEvent) {
$rootScope.$on(options.angularEvent, function() {
hider_.cancel();
displayer_.display(options.popupDelay);
});
} else if (options.scopeEvent) {
scope.$on(options.scopeEvent, function() {
hider_.cancel();
displayer_.display($popover, options.popupDelay);
});
} else {
elm.on(options.trigger, function(e) {
if (false !== options.triggerPrevent) {
e.preventDefault();
}
hider_.cancel();
displayer_.display(options.popupDelay, e);
});
}
elm
.on('mouseout', function() {
hider_.hide(options.timeout);
})
.on('mouseover', function() {
hider_.cancel();
});
$popover
.on('mouseout', function(e) {
hider_.hide(options.timeout);
})
.on('mouseover', function() {
hider_.cancel();
});
/**
* Move the popover to the |placement| position of the object located on the |rect|.
*
* @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, 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 if(align === 'right') {
return rect.right - popoverRect.width;
}
return rect.left;
};
var positionY = function() {
if (align === 'center') {
return Math.round(rect.top + rect.height/2 - popoverRect.height/2);
} else if(align === 'bottom') {
return rect.bottom - popoverRect.height;
}
return rect.top;
};
if (placement === 'top') {
top = rect.top - popoverRect.height;
left = positionX();
} else if (placement === 'right') {
top = positionY();
left = rect.right;
} else if (placement === 'bottom') {
top = rect.bottom;
left = positionX();
} else if (placement === 'left') {
top = positionY();
left = rect.left - popoverRect.width;
}
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', top.toString() + 'px');
}
}
}
/**
* Adjust a rect accordingly to the given x and y mouse positions.
*
* @param rect {ClientRect} The rect to be adjusted.
*/
function adjustRect(rect, adjustX, adjustY, ev) {
// if pageX or pageY is defined we need to lock the popover to the given
// x and y position.
// clone the rect, so we can manipulate its properties.
var localRect = {
bottom: rect.bottom,
height: rect.height,
left: rect.left,
right: rect.right,
top: rect.top,
width: rect.width
};
if (adjustX) {
localRect.left = ev.pageX;
localRect.right = ev.pageX;
localRect.width = 0;
}
if (adjustY) {
localRect.top = ev.pageY;
localRect.bottom = ev.pageY;
localRect.height = 0;
}
return localRect;
}
function getBoundingClientRect(elm) {
var w = window;
var doc = document.documentElement || document.body.parentNode || document.body;
var x = (isDef(w.pageXOffset)) ? w.pageXOffset : doc.scrollLeft;
var y = (isDef(w.pageYOffset)) ? w.pageYOffset : doc.scrollTop;
var rect = elm.getBoundingClientRect();
// ClientRect class is immutable, so we need to return a modified copy
// of it when the window has been scrolled.
if (x || y) {
return {
bottom:rect.bottom+y,
left:rect.left + x,
right:rect.right + x,
top:rect.top + y,
height:rect.height,
width:rect.width
};
}
return rect;
}
function toBoolean(value) {
if (value && value.length !== 0) {
var v = ("" + value).toLowerCase();
value = (v == 'true');
} else {
value = false;
}
return value;
}
/**
* Load the given template in the cache if it is not already loaded.
*
* @param template The URI of the template to be loaded.
* @returns {String} A promise that the template will be loaded.
* @remarks If the template is null or undefined a empty string will be returned.
*/
function loadTemplate(template, plain) {
if (!template) {
return '';
}
if (angular.isString(template) && plain) {
return template;
}
return $templateCache.get(template) || $http.get(template, { cache : true });
}
function insideClickHandler() {
if ($popover.isOpen) {
hider_.hide(0);
}
}
function outsideClickHandler(e) {
if ($popover.isOpen && e.target !== elm[0]) {
var id = $popover[0].id;
if (!isInPopover(e.target)) {
hider_.hide(0);
}
}
function isInPopover(el) {
if (el.id === id) {
return true;
}
var parent = angular.element(el).parent()[0];
if (!parent) {
return false;
}
if (parent.id === id) {
return true;
}
else {
return isInPopover(parent);
}
}
}
function buttonClickHandler() {
if ($popover.isOpen) {
hider_.hide(0);
}
}
}
};
}
]);
})(window, window.angular);
.popover-base-styles, .popover-list, .popover-select {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
z-index: 100;
}
.popover-base-styles ul, .popover-list ul, .popover-select ul, .popover-base-styles .list, .popover-list .list, .popover-select .list {
display: block;
list-style: none;
margin: rem-calc(10 10);
padding: 0;
}
.popover-base-styles ul li a, .popover-list ul li a, .popover-select ul li a, .popover-base-styles ul .list-item a, .popover-list ul .list-item a, .popover-select ul .list-item a, .popover-base-styles .list li a, .popover-list .list li a, .popover-select .list li a, .popover-base-styles .list .list-item a, .popover-list .list .list-item a, .popover-select .list .list-item a {
color: #000;
display: block;
padding: rem-calc(5 10);
}
.popover-base-styles ul li a:hover, .popover-list ul li a:hover, .popover-select ul li a:hover, .popover-base-styles ul .list-item a:hover, .popover-list ul .list-item a:hover, .popover-select ul .list-item a:hover, .popover-base-styles .list li a:hover, .popover-list .list li a:hover, .popover-select .list li a:hover, .popover-base-styles .list .list-item a:hover, .popover-list .list .list-item a:hover, .popover-select .list .list-item a:hover {
background-color: #eee;
text-decoration: none;
}
.popover-base-styles.ns-popover-top-placement, .ns-popover-top-placement.popover-list, .ns-popover-top-placement.popover-select {
margin-top: rem-calc(-5);
}
.popover-base-styles.ns-popover-top-placement .triangle, .ns-popover-top-placement.popover-list .triangle, .ns-popover-top-placement.popover-select .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-top-color: #ccc;
left: 50%;
bottom: -12px;
margin-left: -12px;
margin-bottom: -12px;
}
.popover-base-styles.ns-popover-top-placement .triangle:after, .ns-popover-top-placement.popover-list .triangle:after, .ns-popover-top-placement.popover-select .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.popover-base-styles.ns-popover-top-placement .triangle:after, .ns-popover-top-placement.popover-list .triangle:after, .ns-popover-top-placement.popover-select .triangle:after {
border-top-color: #fff;
border-bottom-width: 0;
bottom: 1px;
margin-left: -11px;
}
.popover-base-styles.ns-popover-bottom-placement, .ns-popover-bottom-placement.popover-list, .ns-popover-bottom-placement.popover-select {
margin-top: rem-calc(5);
}
.popover-base-styles.ns-popover-bottom-placement .triangle, .ns-popover-bottom-placement.popover-list .triangle, .ns-popover-bottom-placement.popover-select .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-bottom-color: #ccc;
left: 50%;
top: -12px;
margin-left: -12px;
margin-top: -12px;
}
.popover-base-styles.ns-popover-bottom-placement .triangle:after, .ns-popover-bottom-placement.popover-list .triangle:after, .ns-popover-bottom-placement.popover-select .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.popover-base-styles.ns-popover-bottom-placement .triangle:after, .ns-popover-bottom-placement.popover-list .triangle:after, .ns-popover-bottom-placement.popover-select .triangle:after {
border-bottom-color: #fff;
border-top-width: 0;
top: 1px;
margin-left: -11px;
}
.popover-base-styles.ns-popover-left-placement, .ns-popover-left-placement.popover-list, .ns-popover-left-placement.popover-select {
margin-left: rem-calc(-5);
}
.popover-base-styles.ns-popover-left-placement .triangle, .ns-popover-left-placement.popover-list .triangle, .ns-popover-left-placement.popover-select .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-left-color: #ccc;
top: 50%;
right: -12px;
margin-top: -12px;
margin-right: -12px;
}
.popover-base-styles.ns-popover-left-placement .triangle:after, .ns-popover-left-placement.popover-list .triangle:after, .ns-popover-left-placement.popover-select .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.popover-base-styles.ns-popover-left-placement .triangle:after, .ns-popover-left-placement.popover-list .triangle:after, .ns-popover-left-placement.popover-select .triangle:after {
border-left-color: #fff;
border-right-width: 0;
right: 1px;
bottom: -11px;
}
.popover-base-styles.ns-popover-right-placement, .ns-popover-right-placement.popover-list, .ns-popover-right-placement.popover-select {
margin-left: rem-calc(5);
}
.popover-base-styles.ns-popover-right-placement .triangle, .ns-popover-right-placement.popover-list .triangle, .ns-popover-right-placement.popover-select .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-right-color: #ccc;
top: 50%;
left: -12px;
margin-top: -12px;
margin-left: -12px;
}
.popover-base-styles.ns-popover-right-placement .triangle:after, .ns-popover-right-placement.popover-list .triangle:after, .ns-popover-right-placement.popover-select .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.popover-base-styles.ns-popover-right-placement .triangle:after, .ns-popover-right-placement.popover-list .triangle:after, .ns-popover-right-placement.popover-select .triangle:after {
border-right-color: #fff;
border-left-width: 0;
left: 1px;
bottom: -11px;
}
.popover-base-styles.ns-popover-left-align .ns-popover-tooltip, .ns-popover-left-align.popover-list .ns-popover-tooltip, .ns-popover-left-align.popover-select .ns-popover-tooltip {
margin-left: 0;
}
.popover-base-styles.ns-popover-right-align .ns-popover-tooltip, .ns-popover-right-align.popover-list .ns-popover-tooltip, .ns-popover-right-align.popover-select .ns-popover-tooltip {
margin-right: 0;
}
.popover-base-styles.ns-popover-top-align .ns-popover-tooltip, .ns-popover-top-align.popover-list .ns-popover-tooltip, .ns-popover-top-align.popover-select .ns-popover-tooltip {
margin-top: 0;
}
.popover-base-styles.ns-popover-bottom-align .ns-popover-tooltip, .ns-popover-bottom-align.popover-list .ns-popover-tooltip, .ns-popover-bottom-align.popover-select .ns-popover-tooltip {
margin-bottom: 0;
}
.ns-popover-list-theme,
.ns-popover-list-theme-fixed,
.ns-popover-help-theme,
.ns-popover-help-theme-medium,
.ns-popover-help-theme-large,
.ns-popover-help-theme-wide,
.ns-popover-help-email {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
z-index: 100;
}
.ns-popover-list-theme ul, .ns-popover-list-theme .list,
.ns-popover-list-theme-fixed ul,
.ns-popover-list-theme-fixed .list,
.ns-popover-help-theme ul,
.ns-popover-help-theme .list,
.ns-popover-help-theme-medium ul,
.ns-popover-help-theme-medium .list,
.ns-popover-help-theme-large ul,
.ns-popover-help-theme-large .list,
.ns-popover-help-theme-wide ul,
.ns-popover-help-theme-wide .list,
.ns-popover-help-email ul,
.ns-popover-help-email .list {
display: block;
list-style: none;
margin: rem-calc(10 10);
padding: 0;
}
.ns-popover-list-theme ul li a, .ns-popover-list-theme ul .list-item a, .ns-popover-list-theme .list li a, .ns-popover-list-theme .list .list-item a,
.ns-popover-list-theme-fixed ul li a,
.ns-popover-list-theme-fixed ul .list-item a,
.ns-popover-list-theme-fixed .list li a,
.ns-popover-list-theme-fixed .list .list-item a,
.ns-popover-help-theme ul li a,
.ns-popover-help-theme ul .list-item a,
.ns-popover-help-theme .list li a,
.ns-popover-help-theme .list .list-item a,
.ns-popover-help-theme-medium ul li a,
.ns-popover-help-theme-medium ul .list-item a,
.ns-popover-help-theme-medium .list li a,
.ns-popover-help-theme-medium .list .list-item a,
.ns-popover-help-theme-large ul li a,
.ns-popover-help-theme-large ul .list-item a,
.ns-popover-help-theme-large .list li a,
.ns-popover-help-theme-large .list .list-item a,
.ns-popover-help-theme-wide ul li a,
.ns-popover-help-theme-wide ul .list-item a,
.ns-popover-help-theme-wide .list li a,
.ns-popover-help-theme-wide .list .list-item a,
.ns-popover-help-email ul li a,
.ns-popover-help-email ul .list-item a,
.ns-popover-help-email .list li a,
.ns-popover-help-email .list .list-item a {
color: #000;
display: block;
padding: rem-calc(5 10);
}
.ns-popover-list-theme ul li a:hover, .ns-popover-list-theme ul .list-item a:hover, .ns-popover-list-theme .list li a:hover, .ns-popover-list-theme .list .list-item a:hover,
.ns-popover-list-theme-fixed ul li a:hover,
.ns-popover-list-theme-fixed ul .list-item a:hover,
.ns-popover-list-theme-fixed .list li a:hover,
.ns-popover-list-theme-fixed .list .list-item a:hover,
.ns-popover-help-theme ul li a:hover,
.ns-popover-help-theme ul .list-item a:hover,
.ns-popover-help-theme .list li a:hover,
.ns-popover-help-theme .list .list-item a:hover,
.ns-popover-help-theme-medium ul li a:hover,
.ns-popover-help-theme-medium ul .list-item a:hover,
.ns-popover-help-theme-medium .list li a:hover,
.ns-popover-help-theme-medium .list .list-item a:hover,
.ns-popover-help-theme-large ul li a:hover,
.ns-popover-help-theme-large ul .list-item a:hover,
.ns-popover-help-theme-large .list li a:hover,
.ns-popover-help-theme-large .list .list-item a:hover,
.ns-popover-help-theme-wide ul li a:hover,
.ns-popover-help-theme-wide ul .list-item a:hover,
.ns-popover-help-theme-wide .list li a:hover,
.ns-popover-help-theme-wide .list .list-item a:hover,
.ns-popover-help-email ul li a:hover,
.ns-popover-help-email ul .list-item a:hover,
.ns-popover-help-email .list li a:hover,
.ns-popover-help-email .list .list-item a:hover {
background-color: #eee;
text-decoration: none;
}
.ns-popover-list-theme.ns-popover-top-placement,
.ns-popover-list-theme-fixed.ns-popover-top-placement,
.ns-popover-help-theme.ns-popover-top-placement,
.ns-popover-help-theme-medium.ns-popover-top-placement,
.ns-popover-help-theme-large.ns-popover-top-placement,
.ns-popover-help-theme-wide.ns-popover-top-placement,
.ns-popover-help-email.ns-popover-top-placement {
margin-top: rem-calc(-5);
}
.ns-popover-list-theme.ns-popover-top-placement .triangle,
.ns-popover-list-theme-fixed.ns-popover-top-placement .triangle,
.ns-popover-help-theme.ns-popover-top-placement .triangle,
.ns-popover-help-theme-medium.ns-popover-top-placement .triangle,
.ns-popover-help-theme-large.ns-popover-top-placement .triangle,
.ns-popover-help-theme-wide.ns-popover-top-placement .triangle,
.ns-popover-help-email.ns-popover-top-placement .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-top-color: #ccc;
left: 50%;
bottom: -12px;
margin-left: -12px;
margin-bottom: -12px;
}
.ns-popover-list-theme.ns-popover-top-placement .triangle:after,
.ns-popover-list-theme-fixed.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-top-placement .triangle:after,
.ns-popover-help-email.ns-popover-top-placement .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.ns-popover-list-theme.ns-popover-top-placement .triangle:after,
.ns-popover-list-theme-fixed.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-top-placement .triangle:after,
.ns-popover-help-email.ns-popover-top-placement .triangle:after {
border-top-color: #fff;
border-bottom-width: 0;
bottom: 1px;
margin-left: -11px;
}
.ns-popover-list-theme.ns-popover-bottom-placement,
.ns-popover-list-theme-fixed.ns-popover-bottom-placement,
.ns-popover-help-theme.ns-popover-bottom-placement,
.ns-popover-help-theme-medium.ns-popover-bottom-placement,
.ns-popover-help-theme-large.ns-popover-bottom-placement,
.ns-popover-help-theme-wide.ns-popover-bottom-placement,
.ns-popover-help-email.ns-popover-bottom-placement {
margin-top: rem-calc(5);
}
.ns-popover-list-theme.ns-popover-bottom-placement .triangle,
.ns-popover-list-theme-fixed.ns-popover-bottom-placement .triangle,
.ns-popover-help-theme.ns-popover-bottom-placement .triangle,
.ns-popover-help-theme-medium.ns-popover-bottom-placement .triangle,
.ns-popover-help-theme-large.ns-popover-bottom-placement .triangle,
.ns-popover-help-theme-wide.ns-popover-bottom-placement .triangle,
.ns-popover-help-email.ns-popover-bottom-placement .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-bottom-color: #ccc;
left: 50%;
top: -12px;
margin-left: -12px;
margin-top: -12px;
}
.ns-popover-list-theme.ns-popover-bottom-placement .triangle:after,
.ns-popover-list-theme-fixed.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-email.ns-popover-bottom-placement .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.ns-popover-list-theme.ns-popover-bottom-placement .triangle:after,
.ns-popover-list-theme-fixed.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-email.ns-popover-bottom-placement .triangle:after {
border-bottom-color: #fff;
border-top-width: 0;
top: 1px;
margin-left: -11px;
}
.ns-popover-list-theme.ns-popover-left-placement,
.ns-popover-list-theme-fixed.ns-popover-left-placement,
.ns-popover-help-theme.ns-popover-left-placement,
.ns-popover-help-theme-medium.ns-popover-left-placement,
.ns-popover-help-theme-large.ns-popover-left-placement,
.ns-popover-help-theme-wide.ns-popover-left-placement,
.ns-popover-help-email.ns-popover-left-placement {
margin-left: rem-calc(-5);
}
.ns-popover-list-theme.ns-popover-left-placement .triangle,
.ns-popover-list-theme-fixed.ns-popover-left-placement .triangle,
.ns-popover-help-theme.ns-popover-left-placement .triangle,
.ns-popover-help-theme-medium.ns-popover-left-placement .triangle,
.ns-popover-help-theme-large.ns-popover-left-placement .triangle,
.ns-popover-help-theme-wide.ns-popover-left-placement .triangle,
.ns-popover-help-email.ns-popover-left-placement .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-left-color: #ccc;
top: 50%;
right: -12px;
margin-top: -12px;
margin-right: -12px;
}
.ns-popover-list-theme.ns-popover-left-placement .triangle:after,
.ns-popover-list-theme-fixed.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-left-placement .triangle:after,
.ns-popover-help-email.ns-popover-left-placement .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.ns-popover-list-theme.ns-popover-left-placement .triangle:after,
.ns-popover-list-theme-fixed.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-left-placement .triangle:after,
.ns-popover-help-email.ns-popover-left-placement .triangle:after {
border-left-color: #fff;
border-right-width: 0;
right: 1px;
bottom: -11px;
}
.ns-popover-list-theme.ns-popover-right-placement,
.ns-popover-list-theme-fixed.ns-popover-right-placement,
.ns-popover-help-theme.ns-popover-right-placement,
.ns-popover-help-theme-medium.ns-popover-right-placement,
.ns-popover-help-theme-large.ns-popover-right-placement,
.ns-popover-help-theme-wide.ns-popover-right-placement,
.ns-popover-help-email.ns-popover-right-placement {
margin-left: rem-calc(5);
}
.ns-popover-list-theme.ns-popover-right-placement .triangle,
.ns-popover-list-theme-fixed.ns-popover-right-placement .triangle,
.ns-popover-help-theme.ns-popover-right-placement .triangle,
.ns-popover-help-theme-medium.ns-popover-right-placement .triangle,
.ns-popover-help-theme-large.ns-popover-right-placement .triangle,
.ns-popover-help-theme-wide.ns-popover-right-placement .triangle,
.ns-popover-help-email.ns-popover-right-placement .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-right-color: #ccc;
top: 50%;
left: -12px;
margin-top: -12px;
margin-left: -12px;
}
.ns-popover-list-theme.ns-popover-right-placement .triangle:after,
.ns-popover-list-theme-fixed.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-right-placement .triangle:after,
.ns-popover-help-email.ns-popover-right-placement .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.ns-popover-list-theme.ns-popover-right-placement .triangle:after,
.ns-popover-list-theme-fixed.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-right-placement .triangle:after,
.ns-popover-help-email.ns-popover-right-placement .triangle:after {
border-right-color: #fff;
border-left-width: 0;
left: 1px;
bottom: -11px;
}
.ns-popover-list-theme.ns-popover-left-align .ns-popover-tooltip,
.ns-popover-list-theme-fixed.ns-popover-left-align .ns-popover-tooltip,
.ns-popover-help-theme.ns-popover-left-align .ns-popover-tooltip,
.ns-popover-help-theme-medium.ns-popover-left-align .ns-popover-tooltip,
.ns-popover-help-theme-large.ns-popover-left-align .ns-popover-tooltip,
.ns-popover-help-theme-wide.ns-popover-left-align .ns-popover-tooltip,
.ns-popover-help-email.ns-popover-left-align .ns-popover-tooltip {
margin-left: 0;
}
.ns-popover-list-theme.ns-popover-right-align .ns-popover-tooltip,
.ns-popover-list-theme-fixed.ns-popover-right-align .ns-popover-tooltip,
.ns-popover-help-theme.ns-popover-right-align .ns-popover-tooltip,
.ns-popover-help-theme-medium.ns-popover-right-align .ns-popover-tooltip,
.ns-popover-help-theme-large.ns-popover-right-align .ns-popover-tooltip,
.ns-popover-help-theme-wide.ns-popover-right-align .ns-popover-tooltip,
.ns-popover-help-email.ns-popover-right-align .ns-popover-tooltip {
margin-right: 0;
}
.ns-popover-list-theme.ns-popover-top-align .ns-popover-tooltip,
.ns-popover-list-theme-fixed.ns-popover-top-align .ns-popover-tooltip,
.ns-popover-help-theme.ns-popover-top-align .ns-popover-tooltip,
.ns-popover-help-theme-medium.ns-popover-top-align .ns-popover-tooltip,
.ns-popover-help-theme-large.ns-popover-top-align .ns-popover-tooltip,
.ns-popover-help-theme-wide.ns-popover-top-align .ns-popover-tooltip,
.ns-popover-help-email.ns-popover-top-align .ns-popover-tooltip {
margin-top: 0;
}
.ns-popover-list-theme.ns-popover-bottom-align .ns-popover-tooltip,
.ns-popover-list-theme-fixed.ns-popover-bottom-align .ns-popover-tooltip,
.ns-popover-help-theme.ns-popover-bottom-align .ns-popover-tooltip,
.ns-popover-help-theme-medium.ns-popover-bottom-align .ns-popover-tooltip,
.ns-popover-help-theme-large.ns-popover-bottom-align .ns-popover-tooltip,
.ns-popover-help-theme-wide.ns-popover-bottom-align .ns-popover-tooltip,
.ns-popover-help-email.ns-popover-bottom-align .ns-popover-tooltip {
margin-bottom: 0;
}
.ns-popover-list-theme-fixed {
position: fixed !important;
}
.ns-popover-help-theme,
.ns-popover-help-theme-medium,
.ns-popover-help-theme-wide,
.ns-popover-help-theme-large {
background: #f3feff;
width: rem-calc(250);
padding: rem-calc(15);
}
.ns-popover-help-theme h6,
.ns-popover-help-theme-medium h6,
.ns-popover-help-theme-wide h6,
.ns-popover-help-theme-large h6 {
font-size: .9rem;
font-weight: 400;
margin-bottom: rem-calc(5);
}
.ns-popover-help-theme p,
.ns-popover-help-theme-medium p,
.ns-popover-help-theme-wide p,
.ns-popover-help-theme-large p {
font-size: .9rem;
}
.ns-popover-help-theme.ns-popover-top-placement .triangle,
.ns-popover-help-theme-medium.ns-popover-top-placement .triangle,
.ns-popover-help-theme-wide.ns-popover-top-placement .triangle,
.ns-popover-help-theme-large.ns-popover-top-placement .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-top-color: #ccc;
left: 50%;
bottom: -12px;
margin-left: -12px;
}
.ns-popover-help-theme.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-top-placement .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.ns-popover-help-theme.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-top-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-top-placement .triangle:after {
border-top-color: #f3feff;
border-bottom-width: 0;
bottom: 1px;
margin-left: -11px;
}
.ns-popover-help-theme.ns-popover-bottom-placement .triangle,
.ns-popover-help-theme-medium.ns-popover-bottom-placement .triangle,
.ns-popover-help-theme-wide.ns-popover-bottom-placement .triangle,
.ns-popover-help-theme-large.ns-popover-bottom-placement .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-bottom-color: #ccc;
left: 50%;
top: -12px;
margin-left: -12px;
}
.ns-popover-help-theme.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-bottom-placement .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.ns-popover-help-theme.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-bottom-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-bottom-placement .triangle:after {
border-bottom-color: #f3feff;
border-top-width: 0;
top: 1px;
margin-left: -11px;
}
.ns-popover-help-theme.ns-popover-left-placement .triangle,
.ns-popover-help-theme-medium.ns-popover-left-placement .triangle,
.ns-popover-help-theme-wide.ns-popover-left-placement .triangle,
.ns-popover-help-theme-large.ns-popover-left-placement .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-left-color: #ccc;
top: 50%;
right: -12px;
margin-top: -12px;
}
.ns-popover-help-theme.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-left-placement .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.ns-popover-help-theme.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-left-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-left-placement .triangle:after {
border-left-color: #f3feff;
border-right-width: 0;
right: 1px;
bottom: -11px;
}
.ns-popover-help-theme.ns-popover-right-placement .triangle,
.ns-popover-help-theme-medium.ns-popover-right-placement .triangle,
.ns-popover-help-theme-wide.ns-popover-right-placement .triangle,
.ns-popover-help-theme-large.ns-popover-right-placement .triangle {
content: '';
display: block;
border: solid 12px;
border-color: transparent;
position: absolute;
border-right-color: #ccc;
top: 50%;
left: -12px;
margin-top: -12px;
}
.ns-popover-help-theme.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-right-placement .triangle:after {
content: ' ';
display: block;
border: solid 11px;
border-color: transparent;
position: absolute;
}
.ns-popover-help-theme.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-medium.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-wide.ns-popover-right-placement .triangle:after,
.ns-popover-help-theme-large.ns-popover-right-placement .triangle:after {
border-right-color: #f3feff;
border-left-width: 0;
left: 1px;
bottom: -11px;
}
.ns-popover-help-theme-medium {
width: rem-calc(300);
}
.ns-popover-help-theme-large {
width: rem-calc(400);
}
.ns-popover-help-theme-wide {
width: rem-calc(500);
}