feat(docs): new tooltip docs (#UIM-864)

Author: bogdanhpk

packages/docs/src/assets/images/tooltip/tooltip-hard__structure.jpg

@@ -2,29 +2,30 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { McButtonModule } from '@ptsecurity/mosaic/button';
-import { McCheckboxModule } from '@ptsecurity/mosaic/checkbox';
-import { McFormsModule } from '@ptsecurity/mosaic/core';
-import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
-import { McIconModule } from '@ptsecurity/mosaic/icon';
-import { McInputModule } from '@ptsecurity/mosaic/input';
-import { McPopoverModule } from '@ptsecurity/mosaic/popover';
-import { McSelectModule } from '@ptsecurity/mosaic/select';
 import { McToolTipModule } from '@ptsecurity/mosaic/tooltip';
 
+import { TooltipExtendedExample } from './tooltip-extended/tooltip-extended-example';
+import { TooltipLongExample } from './tooltip-long/tooltip-long-example';
+import { TooltipMultipleLinesExample } from './tooltip-multiple-lines/tooltip-multiple-lines-example';
 import { TooltipOverviewExample } from './tooltip-overview/tooltip-overview-example';
-import { TooltipScrollableExample } from './tooltip-scrollable/tooltip-scrollable-example';
+import { TooltipPlacementExample } from './tooltip-placement/tooltip-placement-example';
 
 
 export {
     TooltipOverviewExample,
-    TooltipScrollableExample
+    TooltipExtendedExample,
+    TooltipMultipleLinesExample,
+    TooltipPlacementExample,
+    TooltipLongExample
 };
 
 const EXAMPLES = [
     TooltipOverviewExample,
-    TooltipScrollableExample
+    TooltipExtendedExample,
+    TooltipMultipleLinesExample,
+    TooltipPlacementExample,
+    TooltipLongExample
 ];
 
 @NgModule({
@@ -33,15 +34,7 @@ const EXAMPLES = [
         A11yModule,
         McButtonModule,
         McToolTipModule,
-        CdkScrollableModule,
-        FormsModule,
-        McFormsModule,
-        McFormFieldModule,
-        McSelectModule,
-        McPopoverModule,
-        McIconModule,
-        McInputModule,
-        McCheckboxModule
+        CdkScrollableModule
     ],
     declarations: EXAMPLES,
     exports: EXAMPLES

packages/docs/src/assets/images/tooltip/tooltip__structure.png

@@ -0,0 +1,3 @@
+.custom-tooltip {
+    max-width: 485px !important;
+}

packages/mosaic-examples/mosaic/tooltip/index.ts

@@ -0,0 +1,17 @@
+<button mc-button
+        [mcExtendedTooltip]="tooltipContent"
+        [mcTooltipHeader]="tooltipHeader"
+        [mcTooltipClass]="'custom-tooltip'">
+    Кнопка со сложным тултипом
+</button>
+
+<ng-template #tooltipContent>
+    <div>В западной традиции рыбой выступает фрагмент латинского текста из философского трактата Цицерона «О пределах
+        добра и зла», написанного в 45 году до нашей эры. Впервые этот текст был применен для набора шрифтовых образцов
+        неизвестным печатником еще в XVI веке.
+    </div>
+</ng-template>
+
+<ng-template #tooltipHeader>
+    <span>Заголовок</span>
+</ng-template>

packages/mosaic-examples/mosaic/tooltip/tooltip-extended/tooltip-extended-example.css

@@ -0,0 +1,14 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+
+/**
+ * @title Extended tooltip
+ */
+@Component({
+    selector: 'tooltip-extended-example',
+    templateUrl: 'tooltip-extended-example.html',
+    styleUrls: ['tooltip-extended-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TooltipExtendedExample {
+}

packages/mosaic-examples/mosaic/tooltip/tooltip-extended/tooltip-extended-example.html

@@ -0,0 +1,3 @@
+.long-tooltip {
+    max-width: none !important;
+}

packages/mosaic-examples/mosaic/tooltip/tooltip-extended/tooltip-extended-example.ts

@@ -0,0 +1,5 @@
+<button mc-button
+        mcTooltip="efa761fe-ee12-4c77-a0fb-8ecc70f4a79b-a53316a9-1180-4283-a86c"
+        mcTooltipClass="long-tooltip">
+    Кнопка с длинным тултипом
+</button>

packages/mosaic-examples/mosaic/tooltip/tooltip-long/tooltip-long-example.css

@@ -0,0 +1,14 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+
+/**
+ * @title Long tooltip
+ */
+@Component({
+    selector: 'tooltip-long-example',
+    templateUrl: 'tooltip-long-example.html',
+    styleUrls: ['tooltip-long-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TooltipLongExample {
+}

packages/mosaic-examples/mosaic/tooltip/tooltip-long/tooltip-long-example.html

@@ -0,0 +1 @@
+/** No CSS for this example */