+ Add small overlay content, like those found in iOS, to any element for housing secondary information.
+
+ Contents
+
+
+ Usage
+
+
+
+ Examples
+
+
+
+
+
+
+
+ Four directions
+ Four positioning options are available: top, right, bottom, and left aligned.
+
+
+
+
+ Dismiss on next click
+ Use the focus trigger to dismiss popovers on the next click that the user makes.
+
+
+
+
+ Dynamic Content
+ Popover content can contain any html template. Just create <template #myId> with any
+ html allowed by Angular, and provide template ref (#myId) as popover content.
+
+
+
+
+ Dynamic Html
+ By using small trick you can display any dynamic html, which you got from ajax request for example.
+
+
+
+
+ Append to body
+ When you have some styles on a parent element that interfere with a popover, you’ll want to specify a container="body" so that the popover’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden
+
+
+
+
+ Configuring defaults
+
+
+
+
+ API Reference
+
+
+
+`
+})
+export class PopoverSectionComponent {
+ public name:string = 'Popover';
+ public src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/popover';
+ public demos: any = DEMOS;
+ public titleDoc:string = titleDoc;
+}
diff --git a/demo/src/app/components/popover/todo.md b/demo/src/app/components/popover/todo.md
index b092534e39..a315ef8f9f 100644
--- a/demo/src/app/components/popover/todo.md
+++ b/demo/src/app/components/popover/todo.md
@@ -4,8 +4,11 @@
- dismissible popovers (like tooltips)
- templateRef content
- html content
-- triggers
- container: body
+
+todo:
+- triggers
+- styling
- config
+ add doc base
diff --git a/demo/src/app/getting-started/getting-started.template.html b/demo/src/app/getting-started/getting-started.template.html
index 13c35ba463..e20bfb6893 100644
--- a/demo/src/app/getting-started/getting-started.template.html
+++ b/demo/src/app/getting-started/getting-started.template.html
@@ -1,5 +1,5 @@
diff --git a/src/index.ts b/src/index.ts
index 79d02ad539..15759db93b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
-
+/* tslint:disable: max-classes-per-file */
+import { NgModule, ModuleWithProviders } from '@angular/core';
import { AccordionModule } from './accordion/accordion.module';
import { AlertModule } from './alert/alert.module';
import { ButtonsModule } from './buttons/buttons.module';
@@ -15,15 +15,36 @@ import { TabsModule } from './tabs/tabs.module';
import { TimepickerModule } from './timepicker/timepicker.module';
import { TooltipModule } from './tooltip/tooltip.module';
import { TypeaheadModule } from './typeahead/typeahead.module';
+import { PopoverModule } from './popover/popover.module';
+
+const MODULES = [
+ AccordionModule, AlertModule, ButtonsModule,
+ CarouselModule, CollapseModule, DatepickerModule,
+ DropdownModule, ModalModule, PaginationModule,
+ ProgressbarModule, PopoverModule, RatingModule,
+ TabsModule, TimepickerModule, TooltipModule,
+ TypeaheadModule
+];
@NgModule({
- exports: [
- AccordionModule, AlertModule, ButtonsModule, CarouselModule, CollapseModule, DatepickerModule, DropdownModule,
- ModalModule, PaginationModule, ProgressbarModule, RatingModule, TabsModule, TimepickerModule, TooltipModule,
- TypeaheadModule
- ]
+ imports: [
+ AccordionModule.forRoot(), AlertModule.forRoot(), ButtonsModule.forRoot(),
+ CarouselModule.forRoot(), CollapseModule.forRoot(), DatepickerModule.forRoot(),
+ DropdownModule.forRoot(), ModalModule.forRoot(), PaginationModule.forRoot(),
+ ProgressbarModule.forRoot(), PopoverModule.forRoot(), RatingModule.forRoot(),
+ TabsModule.forRoot(), TimepickerModule.forRoot(), TooltipModule.forRoot(),
+ TypeaheadModule.forRoot()
+ ],
+ exports: MODULES
})
+export class BsRootModule {
+}
+
+@NgModule({exports: MODULES})
export class Ng2BootstrapModule {
+ public static forRoot(): ModuleWithProviders {
+ return {ngModule: BsRootModule};
+ }
}
export * from './accordion';
@@ -41,6 +62,6 @@ export * from './tabs';
export * from './timepicker';
export * from './tooltip';
export * from './typeahead';
-
+export * from './popover';
export * from './utils/ng2-bootstrap-config';
export * from './utils/decorators';
diff --git a/src/popover/popover-container.component.ts b/src/popover/popover-container.component.ts
index 1758b73d92..119079da31 100644
--- a/src/popover/popover-container.component.ts
+++ b/src/popover/popover-container.component.ts
@@ -5,10 +5,14 @@ import { PopoverConfig } from './popover-config';
selector: 'popover-container',
changeDetection: ChangeDetectionStrategy.OnPush,
// tslint:disable-next-line
- host: {'[class]': '"popover in popover-" + placement', role: 'tooltip'},
+ host: {
+ '[class]': '"popover in popover-" + placement + " " + placement',
+ role: 'tooltip',
+ style: 'display:block;'
+ },
template: `
-