Add grouped tooltips page

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({

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,

projects/ngx-tippy-demo/src/app/components/nav/nav.component.html

@@ -164,5 +164,16 @@
       </tui-expand>
 
     </li>
+
+    <li class="nav__item">
+      <a
+        class="nav__link"
+        tuiLink
+        routerLink="/grouped-tooltips"
+        routerLinkActive="nav__link--active"
+      >
+        Grouped tooltips
+      </a>
+    </li>
   </ul>
 </div>

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<GroupedTooltipsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [GroupedTooltipsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GroupedTooltipsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/grouped-tooltips.component.html

@@ -0,0 +1,105 @@
+<div class="grouped">
+
+  <h1 class="tui-text_h3">Grouped tooltips</h1>
+
+  <p class="tui-text_body-m-2">
+    If you need to provide unique tooltip content to multiple elements but only initialize once, use the ngx-tippy-group
+    component.
+  </p>
+
+  <tui-notification
+    status="info"
+    class="service-demo tui-space_vertical-4"
+  >
+    For each tooltip within <em>ngx-tippy-group</em> component you should pass <em>data-tippy-grouped</em> attribute
+  </tui-notification>
+
+  <t-demo-code
+    *tuiLet="snippets.grouped_template as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo-code
+    *tuiLet="snippets.grouped_component as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo>
+    <ngx-tippy-group [groupedProps]="groupedProps">
+      <button
+        *ngFor="let btn of [0, 1, 2, 3, 4]"
+        data-tippy-grouped
+        data-tippy-content="Tooltip content"
+        class="tui-button tui-button-{{btn}}"
+        size="m"
+        tuiButton
+        type="button"
+        appearance="primary"
+      >
+        Button
+      </button>
+    </ngx-tippy-group>
+  </t-demo>
+
+  <p class="tui-text_body-m-2">
+    Also you can pass new content and props through attribute for every tooltip element, see <a
+      tuiLink
+      href="https://atomiks.github.io/tippyjs/v6/customization/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      customization
+    </a>
+  </p>
+
+  <t-demo-code
+    *tuiLet="snippets.grouped_custom_template as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo>
+    <ngx-tippy-group [groupedProps]="groupedProps">
+      <button
+        data-tippy-grouped
+        data-tippy-content="Tooltip content"
+        class="tui-button"
+        size="m"
+        tuiButton
+        type="button"
+        appearance="primary"
+      >
+        Button
+      </button>
+
+      <button
+        data-tippy-grouped
+        data-tippy-arrow="true"
+        data-tippy-content="New tooltip content"
+        class="tui-button"
+        size="m"
+        tuiButton
+        type="button"
+        appearance="primary"
+      >
+        Button
+      </button>
+
+      <button
+        data-tippy-grouped
+        data-tippy-placement="right"
+        data-tippy-content="Another tooltip content"
+        class="tui-button"
+        size="m"
+        tuiButton
+        type="button"
+        appearance="primary"
+      >
+        Button
+      </button>
+    </ngx-tippy-group>
+  </t-demo>
+
+</div>

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;
+}

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 {}
+}

projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/index.ts

@@ -0,0 +1 @@
+export { GroupedTooltipsComponent } from './grouped-tooltips.component';

projects/ngx-tippy-demo/src/app/pages/grouped-tooltips/snippets.ts

@@ -0,0 +1,64 @@
+const GROUPED_TEMPLATE_SN = `
+<ngx-tippy-group [groupedProps]="groupedProps">
+  <button
+    *ngFor="let btn of [0, 1, 2, 3, 4]"
+    data-tippy-grouped
+    data-tippy-content="Tooltip content"
+  >
+    Button
+  </button>
+</ngx-tippy-group>
+`;
+
+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 = `
+<ngx-tippy-group [groupedProps]="groupedProps">
+  <button
+    data-tippy-grouped
+    data-tippy-content="Tooltip content"
+  >
+    Button
+  </button>
+
+  <button
+    data-tippy-grouped
+    data-tippy-arrow="true"
+    data-tippy-content="New tooltip content"
+  >
+    Button
+  </button>
+
+  <button
+    data-tippy-grouped
+    data-tippy-placement="right"
+    data-tippy-content="Another tooltip content"
+  >
+    Button
+  </button>
+</ngx-tippy-group>`;
+
+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'],
+  },
+};