docs(docs-infra): tooltip on hover and message after copied (angular#63167)

PR Close angular#63167

Author: MeAkib

adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html

@@ -18,6 +18,8 @@
         class="docs-example-copy-link"
         [attr.aria-label]="'Copy link to ' + exampleMetadata()?.title + ' example to the clipboard'"
         (click)="copyLink()"
+        matTooltip="Copy link to example"
+        matTooltipPosition="above"
       >
         <i aria-hidden="true">
           <svg
@@ -41,8 +43,9 @@
         <button
           type="button"
           (click)="toggleExampleVisibility()"
-          [attr.title]="(expanded() ? 'Collapse' : 'Expand') + ' example'"
           [attr.aria-label]="(expanded() ? 'Collapse' : 'Expand') + ' code example'"
+          matTooltip="{{ expanded() ? 'Collapse' : 'Expand' }} example"
+          matTooltipPosition="above"
         >
           <i aria-hidden="true">
             @if (!expanded()) {
@@ -100,9 +103,10 @@
         <a
           [href]="githubUrl()"
           target="_blank"
-          title="Open example on GitHub"
           class="docs-example-github-link"
           aria-label="Open example on GitHub"
+          matTooltip="Open example on GitHub"
+          matTooltipPosition="above"
         >
           <i aria-hidden="true">
             <svg
@@ -128,8 +132,9 @@
           [href]="stackblitzUrl()"
           target="_blank"
           class="docs-example-stackblitz-link"
-          title="Edit this example in StackBlitz"
-          aria-label="Edit this example in StackBlitz"
+          aria-label="Edit example in StackBlitz"
+          matTooltip="Edit example in StackBlitz"
+          matTooltipPosition="above"
         >
           <i aria-hidden="true">
             <svg

adev/shared-docs/components/viewers/example-viewer/example-viewer.component.spec.ts

@@ -215,7 +215,7 @@ describe('ExampleViewer', () => {
     fixture.detectChanges();
 
     const stackblitzButton = fixture.debugElement.query(
-      By.css('a[aria-label="Edit this example in StackBlitz"]'),
+      By.css('a[aria-label="Edit example in StackBlitz"]'),
     );
     expect(stackblitzButton).toBeTruthy();
     expect(stackblitzButton.nativeElement.href).toBe(component.stackblitzUrl());

adev/shared-docs/components/viewers/example-viewer/example-viewer.component.ts

@@ -28,6 +28,7 @@ import {CopySourceCodeButton} from '../../copy-source-code-button/copy-source-co
 import {ExampleMetadata, Snippet} from '../../../interfaces/index';
 import {EXAMPLE_VIEWER_CONTENT_LOADER} from '../../../providers/index';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 export enum CodeExampleViewMode {
   SNIPPET = 'snippet',
@@ -41,7 +42,7 @@ export const HIDDEN_CLASS_NAME = 'hidden';
 
 @Component({
   selector: 'docs-example-viewer',
-  imports: [CommonModule, CopySourceCodeButton, MatTabsModule],
+  imports: [CommonModule, CopySourceCodeButton, MatTabsModule, MatTooltipModule],
   templateUrl: './example-viewer.component.html',
   styleUrls: ['./example-viewer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,