Angular Material Tooltip
Let's talk about tooltips in angular material basically angular material tooltip provides a text label that is displayed when the user hovers over or longpresses an element.
So to get started we need to import the module in our material.module.ts
and add it to the MaterialComponents[]
array.
import { MatTooltipModule } from "@angular/material";
const MaterialComponents = [
MatTooltipModule,
]
Next in the HTML let's create a simple button and then associate a tooltip with that button, to do that we need to add matTooltip="Welcome to HoshCoding.com"
as attribute.
<button mat-raised-button matTooltip="Welcome to HoshCoding.com">Hello</button>
If I save the file and take a look at the browser you can see that when I hover on the button we get the tooltip that says "Welcome to HoshCoding.com" and by default the position of the tooltip is the bottom of the element that is bellow the element let's see how to control the position of a tooltip.
Angular Material Tooltip Control Positions
To control the position of a tooltip we use the attribute matTooltipPosition
which accept 'after', 'before', 'above', 'below', 'left', 'right' as values, let's see how it should looks if we change those values.
Tooltip after
<button
mat-raised-button
matTooltip="HoshCoding.com"
matTooltipPosition="after"
>
Hello
</button>
Tooltip before
as you may I added some left margin so that the button is not sticked to the left of the page that how you can see easily the tooltip before the button element.
<button
style="margin-left: 50%"
mat-raised-button
matTooltip="HoshCoding.com"
matTooltipPosition="before"
>
Hello
</button>
Tooltip above
I added a top margin to push the button element to the bottom a little so that the tooltip can float to the top of the button element.
<button
style="margin-top: 10em"
mat-raised-button
matTooltip="HoshCoding.com"
matTooltipPosition="above"
>
Hello
</button>
Tooltip below
<button
mat-raised-button
matTooltip="HoshCoding.com"
matTooltipPosition="below"
>
Hello
</button>
Tooltip left
Also here to create a room for the tooltip to be shown we added some left margin.
<button
style="margin-left: 10em"
mat-raised-button
matTooltip="HoshCoding.com"
matTooltipPosition="left"
>
Hello
</button>
You may notice the it behaves just like the before postion.
Tooltip right
<button
mat-raised-button
matTooltip="HoshCoding.com"
matTooltipPosition="right"
>
Hello
</button>
You may notice the it behaves just like the after postion.
Angular Material Tooltip Delay
Sometimes the user might be just moving their mouse around and you don't want to the tooltip to pop up immediately, so adding a delay really helps in those situations we make use of matTooltipShowDelay
and matTooltipHideDelay
attributes let's add 2 seconds delay.
<button
mat-raised-button
matTooltip="HoshCoding.com"
matTooltipPosition="right"
matTooltipShowDelay="2000"
matTootipHideDelay="2000"
>
Hello
</button>
If you save the file and take a look at the browser there should be a delay in show and hide of the tooltip so when you hover on the button the tooltip will be shown after 2 seconds and when you move your mouse away it's gonna take 2 seconds to hide the tooltip. But you might not need a high delay but again it completely depends on your requirement.
That's about angular material tooltips if you want more details consider to visit the official documentation.
-
1. Angular Material - Getting Started
-
2. Angular Material - Material Module
-
3. Angular Material - Typography
-
4. Angular Material - Buttons
-
5. Angular Material Button Toggle
-
6. Angular Material Icons
-
7. Angular Material Badges
-
8. Angular Material Progress Spinner
-
9. Angular Material Navbar
-
10. Angular Material Sidenav
-
11. Angular Material Menu
-
12. Angular Material List
-
13. Angular Material Grid List
-
14. Angular Material Expansion Panel
-
15. Angular Material Cards
-
16. Angular Material Tabs
-
17. Angular Material Stepper
-
18. Angular Material Input
-
19. Angular Material Select
-
20. Angular Material Autocomplete
-
21. Angular Material Checkbox & Radio Button
-
22. Angular Material Date Picker
-
23. Angular Material Tooltip
-
24. Angular Material Snackbar
-
25. Angular Material Dialog
-
26. Angular Material Data Table
-
27. Angular Material Exploring Data Table
-
28. Angular Material Data table Filtering
-
29. Angular Material Data Table Sorting
-
30. Angular Material Data Table Pagination
-
31. Angular Material Virtual Scrolling