CODEWITHSUNDEEP
angularangular-material
imPK
imPK

Reputation: 884

Hide mat-tooltip immediately when mouse leaves button

Latest Angular Material v13 upgrade is causing this mattooltip issue

When a button is hovered it shows tooltip and overlaps with the adjacent controls not allowing to click until mouse is moved away from the tooltip

How can I immediately close this mattooltip when mouse pointer leaves its parent control (Action Button) and access the adjacent controls (Tooltip Position dropdown)

example here https://material.angular.io/components/tooltip/overview#positioning

tooltip overlap with other controls

Upvotes: 15

Views: 6933

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4790

For some reason this setting is not exposed on the directive itself, but is set on a global level on the MatTooltipDefaultOptions.

What you're looking for is the disableTooltipInteractivity property, which makes the tooltip not disappear when hovered, making the inner text selectable.

You'll need to provide your custom MatTooltipDefaultOptions (either on module level or component level) with the value set to false.

Working stackblitz (see app.module.ts) here.

Upvotes: 23

Related Questions