I am creating a custom directive called TooltipDirective whihc is going to add matTooltip to every host element, code is like below
import { Directive, ElementRef, Input, OnInit, Renderer } from '@angular/core'; @Directive({ selector: '[tooltip]' }) export class TooltipDirective implements OnInit { @Input() tooltip: string; constructor(private hostElement: ElementRef, private renderer: Renderer) { } ngOnInit() { this.renderer.setElementAttribute(this.hostElement.nativeElement, 'matTooltip', this.tooltip); } }
In my html I have two elements to compare the result
<i class="material-icons" tooltip="Test Tooltip">reply_all</i> <i class="material-icons" matTooltip="Test Tooltip">reply_all</i>
in the result html tooltip
and mattooltip
attributes are added but it doesn’t show the tooltip.
and rendered html is like below
<i _ngcontent-c10="" class="material-icons" tooltip="Test Tooltip" mattooltip="Test Tooltip" ng-reflect-tooltip="Test Tooltip">reply_all</i> <i _ngcontent-c10="" class="material-icons" mattooltip="Test Tooltip" aria-describedby="cdk-describedby-message-1" cdk-describedby-host="" ng-reflect-message="Test Tooltip">reply_all</i>
I tried adding other extra attributes but still doesn’t work.
Advertisement
Answer
The other answer and comments are correct, btw finally I made it like this and it’s working
import { Directive, ElementRef, Inject, Input, NgZone, Optional, ViewContainerRef } from '@angular/core'; import { MAT_TOOLTIP_DEFAULT_OPTIONS, MAT_TOOLTIP_SCROLL_STRATEGY, MatTooltip, MatTooltipDefaultOptions } from '@angular/material/tooltip'; import { AriaDescriber, FocusMonitor } from '../../../../../node_modules/@angular/cdk/a11y'; import { Directionality } from '../../../../../node_modules/@angular/cdk/bidi'; import { Overlay, ScrollDispatcher } from '../../../../../node_modules/@angular/cdk/overlay'; import { Platform } from '../../../../../node_modules/@angular/cdk/platform'; @Directive({ selector: '[tooltip]', exportAs: 'tooltip' }) export class TooltipDirective extends MatTooltip { @Input() get tooltip() { return this.message; } set tooltip(value: string) { this.message = value; } constructor( _overlay: Overlay, _elementRef: ElementRef, _scrollDispatcher: ScrollDispatcher, _viewContainerRef: ViewContainerRef, _ngZone: NgZone, _platform: Platform, _ariaDescriber: AriaDescriber, _focusMonitor: FocusMonitor, @Inject(MAT_TOOLTIP_SCROLL_STRATEGY) _scrollStrategy: any, @Optional() _dir: Directionality, @Optional() @Inject(MAT_TOOLTIP_DEFAULT_OPTIONS) _defaultOptions: MatTooltipDefaultOptions) { super( _overlay, _elementRef, _scrollDispatcher, _viewContainerRef, _ngZone, _platform, _ariaDescriber, _focusMonitor, _scrollStrategy, _dir, _defaultOptions ); } }