It is not available out of the box in MatToolTip but you can make use of Angular CDK to implement a custom tooltip by using OverlayModule of cdk. I have recently implemented a custom tooltip directive which shows the custom tooltip. Here is the working stackblitz - https://stackblitz.com/edit/angular-s7zevt?file=app%2Ftool-tip-renderer.directive.ts
First, have a component which will be hosted in Overlay like this -
/**
* This component will be used to show custom tooltip
*
* This component will be rendered using OverlayModule of angular material
* This component will be rendered by the directive on an Overlay
*
* CONSUMER will not be using this component directly
* This component will be hosted in an overlay by ToolTipRenderer directive
* This component exposes two properties. These two properties will be filled by ToolTipRenderer directive
* 1. text - This is a simple string which is to be shown in the tooltip; This will be injected in the ToolTipRenderer directive
* by the consumer
* 2. contentTemplate - This gives finer control on the content to be shown in the tooltip
*
* NOTE - ONLY one should be specified; If BOTH are specified then "template" will be rendered and "text" will be ignored
*/
@Component({
selector: 'app-custom-tool-tip',
templateUrl: './custom-tool-tip.component.html',
styleUrls: ['./custom-tool-tip.component.css']
})
export class CustomToolTipComponent implements OnInit {
/**
* This is simple text which is to be shown in the tooltip
*/
@Input() text: string;
/**
* This provides finer control on the content to be visible on the tooltip
* This template will be injected in ToolTipRenderer directive in the consumer template
* <ng-template #template>
* content.....
* </ng-template>
*/
@Input() contentTemplate: TemplateRef<any>;
constructor() { }
ngOnInit() {
}
}
Now have a directive which will use an overlay to render the above component -
@Directive({
selector: '[customToolTip]'
})
export class ToolTipRendererDirective {
/**
* This will be used to show tooltip or not
* This can be used to show the tooltip conditionally
*/
@Input() showToolTip: boolean = true;
//If this is specified then the specified text will be shown in the tooltip
@Input(`customToolTip`) text: string;
//If this is specified then specified template will be rendered in the tooltip
@Input() contentTemplate: TemplateRef<any>;
private _overlayRef: OverlayRef;
constructor(private _overlay: Overlay,
private _overlayPositionBuilder: OverlayPositionBuilder,
private _elementRef: ElementRef) { }
/**
* Init life cycle event handler
*/
ngOnInit() {
if (!this.showToolTip) {
return;
}
//you can take the position as an input to adjust the position
//, for now, it will show at the bottom always; but you can adjust your code
as per your need
const positionStrategy = this._overlayPositionBuilder
.flexibleConnectedTo(this._elementRef)
.withPositions([{
originX: 'center',
originY: 'bottom',
overlayX: 'center',
overlayY: 'top',
offsetY: 5,
}]);
this._overlayRef = this._overlay.create({ positionStrategy});
}
/**
* This method will be called whenever the mouse enters in the Host element
* i.e. where this directive is applied
* This method will show the tooltip by instantiating the CustomToolTipComponent and attaching to the overlay
*/
@HostListener('mouseenter')
show() {
//attach the component if it has not already attached to the overlay
if (this._overlayRef && !this._overlayRef.hasAttached()) {
const tooltipRef: ComponentRef<CustomToolTipComponent> = this._overlayRef.attach(new ComponentPortal(CustomToolTipComponent));
tooltipRef.instance.text = this.text;
tooltipRef.instance.contentTemplate = this.contentTemplate;
}
}
/**
* This method will be called when the mouse goes out of the host element
* i.e. where this directive is applied
* This method will close the tooltip by detaching the overlay from the view
*/
@HostListener('mouseleave')
hide() {
this.closeToolTip();
}
/**
* Destroy lifecycle event handler
* This method will make sure to close the tooltip
*/
ngOnDestroy() {
this.closeToolTip();
}
/**
* This method will close the tooltip by detaching the component from the overlay
*/
private closeToolTip() {
if (this._overlayRef) {
this._overlayRef.detach();
}
}
}
declare above component and directives in the respective module.
Now use it the custom tooltip like this -
<button mat-raised-button
aria-label="Button that displays a tooltip when focused or hovered over"
customToolTip [contentTemplate]="template">
Action
</button>
<ng-template #template>
<div style="display: flex; flex-direction: column">
<span>tooltip text</span>
<span>tootlip description</span>
</div>
</ng-template>
To show a string similar to MatToolTip, use it like this -
<div customToolTip="Showing ToolTip from custom tooltip directive">
//InnerHtml....
</div>
