0

I have created a MenuItem component in Angular, which consists of an icon and an a-tag:

<a routerLinkActive="active">
  <my-icon name="{{ iconName }}"></my-icon>
  <a routerLink="{{ routerLink }}">{{ title }}</a>
</a>

It works fine, but when hovering over the menu item, a tooltip pops up, which shows the title of the a-tag. I am assuming this is the default behavior of the a-tag. Is it possible to shut off this tooltip though?

Luk
  • 1,009
  • 2
  • 15
  • 33
  • Does this answer your question https://stackoverflow.com/questions/15364063/is-it-possible-to-hide-the-title-from-a-link-with-css ? – Grumpy Jun 18 '22 at 08:09
  • thx for your comment, @Grumpy! I have tried out `pointer-events: none;`, but this doesn't seem to work. Also, I want the link to be clickable, I just don't want to show this tooltip. – Luk Jun 18 '22 at 19:51

1 Answers1

0

I hope you are well

If you mean when the mouse hovers over the link and a box is displayed in the lower left corner of the screen that has the content of the link I do not think I was looking for such a question, but this is not the solution

The solution is for us to use the route itself in Angular

// component.html
 <a (click)="navigateURL()">{{ title }}</a>

now in component ts

constructor(private router: Router){}

navigateURL(){
 this.router.navigateByUrl("Your url");
}

I hope I was able to help

davood beheshti
  • 213
  • 1
  • 11
  • 1
    Thx a lot for your answer! This is interesting, definitely, but I was actually talking about another box / tooltip: When hovering over my link, a box appears next to it, it looks like a tooltip. I cannot show a picture, as it disappears whenever I press any key or move my cursor. It looks just like the one that appears on stackoverflow when you hover above your inbox message icon. – Luk Jun 18 '22 at 19:50