Desktop
\r\n \r\nMobile
\r\n \r\n\r\n \r\n This text has attached tooltip\r\n \r\n
\r\n\r\n\r\n\r\n\r\n\r\n","import { ChangeDetectionStrategy, Component, Injector, ReflectiveInjector } from '@angular/core';\r\n\r\nimport { demoComponentContent } from './tooltip-section.list';\r\nimport { ContentSection } from '@app/shared/components/docs/models/content-section.model';\r\n\r\n@Component({\r\n selector: 'tooltip-section',\r\n templateUrl: './tooltip-section.component.html',\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TooltipSectionComponent {\r\n name = 'Tooltip';\r\n src = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/tooltip';\r\n componentContent: ContentSection[] = demoComponentContent;\r\n}\r\n","Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and much more.
\r\nThe easiest way to add the tooltip component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component tooltip\r\n
Four positioning options are available: top, right,\r\n bottom, and left. Besides that, auto option may be\r\n used to detect a position that fits the component on the screen.
You can disable adaptive position via adaptivePosition input or config option
Use the focus trigger to dismiss tooltips on the next click\r\n that the user makes.
Pass a string as tooltip content
`,\r\n outlet: DemoTooltipDynamicComponent\r\n },\r\n {\r\n title: 'Custom content template',\r\n anchor: 'custom-content-template',\r\n component: require('!!raw-loader!./demos/custom-content/custom-content.ts'),\r\n html: require('!!raw-loader!./demos/custom-content/custom-content.html'),\r\n description: `Create <ng-template #myId> with any html allowed by Angular,\r\n and provide template ref [tooltip]=\"myId\" as tooltip content
By using [innerHtml] inside ng-template you\r\n can display any dynamic html
When you have some styles on a parent element that interfere with a tooltip,\r\n you’ll want to specify a container=\"body\" so that the tooltip’s HTML will be\r\n appended to body. This will help to avoid rendering problems in more complex components\r\n (like our input groups, button groups, etc) or inside elements with overflow: hidden
You can manage tooltip using its show(), hide() and toggle() methods. \r\n If you want to manage tooltip's state manually, use triggers=\"\"
Hold on cursor above button for 0,5 second or more to see delayed tooltip
`,\r\n outlet: DemoTooltipDelayComponent\r\n }\r\n ]\r\n },\r\n {\r\n name: 'API Reference',\r\n anchor: 'api-reference',\r\n outlet: ApiSectionsComponent,\r\n content: [\r\n {\r\n title: 'TooltipDirective',\r\n anchor: 'tooltip-directive',\r\n outlet: NgApiDocComponent\r\n },\r\n {\r\n title: 'TooltipConfig',\r\n anchor: 'tooltip-config',\r\n outlet: NgApiDocConfigComponent\r\n }\r\n ]\r\n }\r\n];\r\n\r\n","export default \"\\r\\n\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-tooltip-adaptive-position',\\r\\n templateUrl: './adaptive-position.html'\\r\\n})\\r\\nexport class DemoTooltipAdaptivePositionComponent {}\\r\\n\";","export default \"\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-tooltip-basic',\\r\\n templateUrl: './basic.html'\\r\\n})\\r\\nexport class DemoTooltipBasicComponent {}\\r\\n\";","export default \"\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-tooltip-class',\\r\\n templateUrl: './class.html'\\r\\n})\\r\\nexport class DemoTooltipClassComponent {}\\r\\n\";","export default \"\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\nimport { TooltipConfig } from 'ngx-bootstrap/tooltip';\\r\\n\\r\\n// such override allows to keep some initial values\\r\\n\\r\\nexport function getAlertConfig(): TooltipConfig {\\r\\n return Object.assign(new TooltipConfig(), {\\r\\n placement: 'right',\\r\\n container: 'body',\\r\\n delay: 500\\r\\n });\\r\\n}\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-tooltip-config',\\r\\n templateUrl: './config.html',\\r\\n providers: [{ provide: TooltipConfig, useFactory: getAlertConfig }]\\r\\n})\\r\\nexport class DemoTooltipConfigComponent {}\\r\\n\";","export default \"Desktop
\\r\\n \\r\\nMobile
\\r\\n \\r\\n\\r\\n \\r\\n This text has attached tooltip\\r\\n \\r\\n
\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\\r\\n\";","export default \"import { Component } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-tooltip-triggers-manual',\\r\\n templateUrl: './triggers-manual.html'\\r\\n})\\r\\nexport class DemoTooltipTriggersManualComponent {}\\r\\n\";","export default \"// RECOMMENDED\\r\\nimport { TooltipModule } from 'ngx-bootstrap/tooltip';\\r\\n// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)\\r\\nimport { TooltipModule } from 'ngx-bootstrap';\\r\\n\\r\\n@NgModule({\\r\\n imports: [TooltipModule.forRoot(),...]\\r\\n})\\r\\nexport class AppModule(){}\\r\\n\";"],"names":[],"sourceRoot":"webpack:///"}