Angular2 custom tooltip on icon click

Question

I want to show a tooltip when i click an icon, not by hovering on it.

<a title="Tooltip">
    <i class="fa fa-info-circle"></i>
</a>

I also want to be able to customize to the tooltip with some classes like:

<div class="a-tooltip a-tooltip--top-right">
  This is my tooltip text!
</div>

My try:

<a (click)="tooltip.toggle()"
   #tooltip="matTooltip"
   matTooltip="test"
   aria-label="Button that displays a tooltip when focused or hovered over">
   <i class="fa fa-info-circle"></i>
</a>

This does however not show a tooltip on clicking. In app.module.ts i have:

import { MatTooltipModule } from '@angular/material';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        MatTooltipModule 
    ]
})

What did you try so far? Where are you failing?

emkay
– emkay

2019-03-07 10:38:40 +00:00
Commented Mar 7, 2019 at 10:38 — emkay
– emkay, Commented Mar 7, 2019 at 10:38
@emkay see update.

Toike
– Toike

2019-03-07 11:49:22 +00:00
Commented Mar 7, 2019 at 11:49 — Toike
– Toike, Commented Mar 7, 2019 at 11:49

Amit Baranes · Accepted Answer · 2019-03-07 14:10:04Z

4

By default mat-tooltip is designed for mouse hover. If, you want to disable that use the following code :

<span matTooltip="Tooltip!" 
  (mouseenter)="$event.stopImmediatePropagation()" 
  (mouseleave)="$event.stopImmediatePropagation()"
  #tooltip="matTooltip" (click)="tooltip.toggle()">Test</span>

edited Mar 7, 2019 at 14:10

answered Mar 7, 2019 at 12:48

Amit Baranes

8,1922 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toike Over a year ago

With this, I can make an Icon clickable. However, the tooltip is not show near the clicked element, but a mat-tooltip-component is placed at the bottom of my page, below the footer...

Amit Baranes Over a year ago

Please provide an example.

Collectives™ on Stack Overflow

Angular2 custom tooltip on icon click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related