diff --git a/projects/ngx-tippy-demo/src/app/app-routing.module.ts b/projects/ngx-tippy-demo/src/app/app-routing.module.ts index bb38161..039f7c4 100644 --- a/projects/ngx-tippy-demo/src/app/app-routing.module.ts +++ b/projects/ngx-tippy-demo/src/app/app-routing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; import { DemoPageComponent } from '@pages/demo-page'; +import { GroupedTooltipsComponent } from '@pages/grouped-tooltips'; import { ServiceComponent } from '@pages/service'; import { AppContentComponent } from 'projects/ngx-tippy-demo/src/app/pages/app-content'; import { GettingStartedComponent } from 'projects/ngx-tippy-demo/src/app/pages/getting-started'; @@ -37,6 +38,10 @@ export const routes: Routes = [ path: 'demo', component: DemoPageComponent, }, + { + path: 'grouped-tooltips', + component: GroupedTooltipsComponent, + }, ]; @NgModule({ diff --git a/projects/ngx-tippy-demo/src/app/app.module.ts b/projects/ngx-tippy-demo/src/app/app.module.ts index 7e6e6fd..3e4f7c8 100644 --- a/projects/ngx-tippy-demo/src/app/app.module.ts +++ b/projects/ngx-tippy-demo/src/app/app.module.ts @@ -13,6 +13,7 @@ import { AppContentComponent } from '@pages/app-content'; import { ContentComponent } from '@pages/content'; import { DemoPageComponent } from '@pages/demo-page'; import { GettingStartedComponent } from '@pages/getting-started'; +import { GroupedTooltipsComponent } from '@pages/grouped-tooltips'; import { NotSupportedComponent } from '@pages/not-supported'; import { PropsComponent } from '@pages/props'; import { ServiceComponent } from '@pages/service'; @@ -69,6 +70,7 @@ function initialize(SchemeService: SchemeService) { ServiceComponent, DemoPageComponent, DefaultOrderKeyvaluePipe, + GroupedTooltipsComponent, ], imports: [ AppRoutingModule, diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html index 6dd9e83..fc90a66 100644 --- a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html +++ b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html @@ -164,5 +164,16 @@ + +
  • + + Grouped tooltips + +
    • diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/_tests/grouped-tooltips.component.spec.ts b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/_tests/grouped-tooltips.component.spec.ts new file mode 100644 index 0000000..29a9dca --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/_tests/grouped-tooltips.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GroupedTooltipsComponent } from '../grouped-tooltips.component'; + +describe('GroupedTooltipsComponent', () => { + let component: GroupedTooltipsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [GroupedTooltipsComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(GroupedTooltipsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html new file mode 100644 index 0000000..aebab8d --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html @@ -0,0 +1,105 @@ +
    + +

    Grouped tooltips

    + +

    + If you need to provide unique tooltip content to multiple elements but only initialize once, use the ngx-tippy-group + component. +

    + + + For each tooltip within ngx-tippy-group component you should pass data-tippy-grouped attribute + + + + + + + + + + + + +

    + Also you can pass new content and props through attribute for every tooltip element, see + customization + +

    + + + + + + + + + + + + + +
    diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.scss b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.scss new file mode 100644 index 0000000..5f879c6 --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.scss @@ -0,0 +1,7 @@ +.tui-text_h3 { + margin-top: 0; +} + +.tui-button:not(:first-child) { + margin-left: 1rem; +} diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.ts b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.ts new file mode 100644 index 0000000..6ab2fc9 --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.ts @@ -0,0 +1,21 @@ +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { NgxTippyProps } from 'ngx-tippy-wrapper'; +import { SNIPPETS } from './snippets'; + +@Component({ + selector: 'app-grouped-tooltips', + templateUrl: './grouped-tooltips.component.html', + styleUrls: ['./grouped-tooltips.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class GroupedTooltipsComponent implements OnInit { + public readonly snippets = SNIPPETS; + public readonly groupedProps: NgxTippyProps = { + arrow: false, + placement: 'top', + }; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/index.ts b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/index.ts new file mode 100644 index 0000000..55e265c --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/index.ts @@ -0,0 +1 @@ +export { GroupedTooltipsComponent } from './grouped-tooltips.component'; diff --git a/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/snippets.ts b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/snippets.ts new file mode 100644 index 0000000..c1589ea --- /dev/null +++ b/projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/snippets.ts @@ -0,0 +1,64 @@ +const GROUPED_TEMPLATE_SN = ` + + + +`; + +const GROUPED_COMPONENT_SN = ` +import { NgxTippyProps } from 'ngx-tippy-wrapper'; + +@Component({ ... }) +export class DemoComponent implements OnInit { + groupedProps: NgxTippyProps = { + arrow: false, + placement: 'top', + }; + ... +}`; + +const GROUPED_CUSTOM_TEMPLATE_SN = ` + + + + + + +`; + +export const SNIPPETS = { + grouped_template: { + snippet: GROUPED_TEMPLATE_SN, + languages: ['html'], + }, + grouped_component: { + snippet: GROUPED_COMPONENT_SN, + languages: ['typescript'], + }, + grouped_custom_template: { + snippet: GROUPED_CUSTOM_TEMPLATE_SN, + languages: ['html'], + }, +};