Add Multiple tooltips on a single element page

projects/ngx-tippy-demo/src/app/app-routing.module.ts

@@ -2,6 +2,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 { MultipleTooltipsComponent } from '@pages/multiple-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';
@@ -42,6 +43,10 @@ export const routes: Routes = [
     path: 'grouped-tooltips',
     component: GroupedTooltipsComponent,
   },
+  {
+    path: 'multiple-tooltips',
+    component: MultipleTooltipsComponent,
+  },
 ];
 
 @NgModule({

projects/ngx-tippy-demo/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { ContentComponent } from '@pages/content';
 import { DemoPageComponent } from '@pages/demo-page';
 import { GettingStartedComponent } from '@pages/getting-started';
 import { GroupedTooltipsComponent } from '@pages/grouped-tooltips';
+import { MultipleTooltipsComponent } from '@pages/multiple-tooltips';
 import { NotSupportedComponent } from '@pages/not-supported';
 import { PropsComponent } from '@pages/props';
 import { ServiceComponent } from '@pages/service';
@@ -71,6 +72,7 @@ function initialize(SchemeService: SchemeService) {
     DemoPageComponent,
     DefaultOrderKeyvaluePipe,
     GroupedTooltipsComponent,
+    MultipleTooltipsComponent,
   ],
   imports: [
     AppRoutingModule,

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

@@ -175,5 +175,16 @@
         Grouped tooltips
       </a>
     </li>
+
+    <li class="nav__item">
+      <a
+        class="nav__link"
+        tuiLink
+        routerLink="/multiple-tooltips"
+        routerLinkActive="nav__link--active"
+      >
+        Multiple tooltips on a single element
+      </a>
+    </li>
   </ul>
 </div>

projects/ngx-tippy-demo/src/app/pages/multiple-tooltips/_tests/multiple-tooltips.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultipleTooltipsComponent } from '../multiple-tooltips.component';
+
+describe('MultipleTooltipsComponent', () => {
+  let component: MultipleTooltipsComponent;
+  let fixture: ComponentFixture<MultipleTooltipsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MultipleTooltipsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MultipleTooltipsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -0,0 +1,52 @@
+<div class="multiple">
+
+  <h1 class="tui-text_h3">Multiple tooltips on a single element</h1>
+
+  <p class="tui-text_body-m-2">
+    For multiple tooltips on a single element - use nest elements with <em>ngxTippy</em> directive:
+  </p>
+
+  <t-demo-code
+    *tuiLet="snippets.multiple as s"
+    [snippet]="s.snippet"
+    [languages]="s.languages"
+  ></t-demo-code>
+
+  <t-demo>
+    <div
+      ngxTippy="Left tooltip content"
+      [tippyProps]="{
+        placement: 'left',
+        delay: [50, 100],
+        animation: 'shift-toward'
+      }"
+    >
+      <div
+        ngxTippy="Right tooltip content"
+        [tippyProps]="{
+          placement: 'right',
+          delay: [100, 150],
+          animation: 'shift-toward'
+        }"
+      >
+        <button
+          ngxTippy="Top tooltip content"
+          class="tui-button"
+          size="m"
+          tuiButton
+          type="button"
+          appearance="primary"
+          [tippyProps]="{
+            placement: 'top',
+            delay: [200, 250],
+            animation: 'shift-toward'
+          }"
+        >
+          Button
+        </button>
+      </div>
+    </div>
+  </t-demo>
+
+
+</div>

projects/ngx-tippy-demo/src/app/pages/multiple-tooltips/multiple-tooltips.component.scss

@@ -0,0 +1,3 @@
+.tui-text_h3 {
+  margin-top: 0;
+}

projects/ngx-tippy-demo/src/app/pages/multiple-tooltips/multiple-tooltips.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { SNIPPETS } from './snippets';
+
+@Component({
+  selector: 'app-multiple-tooltips',
+  templateUrl: './multiple-tooltips.component.html',
+  styleUrls: ['./multiple-tooltips.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MultipleTooltipsComponent implements OnInit {
+  public readonly snippets = SNIPPETS;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,37 @@
+const MULTIPLE_TEMPLATE = `
+<div
+  ngxTippy="Left tooltip content"
+  [tippyProps]="{
+    placement: 'left',
+    delay: [50, 100],
+    animation: 'shift-toward'
+  }"
+>
+  <div
+    ngxTippy="Right tooltip content"
+    [tippyProps]="{
+      placement: 'right',
+      delay: [100, 150],
+      animation: 'shift-toward'
+    }"
+  >
+    <button
+      ngxTippy="Top tooltip content"
+      [tippyProps]="{
+        placement: 'top',
+        delay: [200, 250],
+        animation: 'shift-toward'
+      }"
+    >
+      Button
+    </button>
+  </div>
+</div>
+`;
+
+export const SNIPPETS = {
+  multiple: {
+    snippet: MULTIPLE_TEMPLATE,
+    languages: ['html'],
+  },
+};