Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow title on mat-badge #15801

Open
mmmatthew opened this Issue Apr 12, 2019 · 7 comments

Comments

Projects
None yet
5 participants
@mmmatthew
Copy link

mmmatthew commented Apr 12, 2019

Please describe the feature you would like to request.

Include an @input('matTitle') property that provides simple tooltip functionality to mat-badge.

What is the use-case or motivation for this proposal?

We use the badge to indicate that there is an issue with the data displayed. We could use the badge title to provide more information about the issue.

Is there anything else we should know?

This request is related but not identical to #12969

@Airblader

This comment has been minimized.

Copy link
Contributor

Airblader commented Apr 12, 2019

If you want to display a tooltip, why not use matTooltip?

@mmmatthew

This comment has been minimized.

Copy link
Author

mmmatthew commented Apr 12, 2019

  • Because the tooltip for the object itself is already used to provide information about the object. A badge tooltip would provide more information about the badge.
  • The object tooltip disappears when you mouse-over the badge.
@Airblader

This comment has been minimized.

Copy link
Contributor

Airblader commented Apr 12, 2019

Perhaps an idea would be to allow passing a template for the badge, and then users are free to use title or matTooltip for that template somehow.

@FIRSTNIGHTINTHEWOODS

This comment has been minimized.

Copy link

FIRSTNIGHTINTHEWOODS commented Apr 12, 2019

mb this will help u https://stackblitz.com/edit/cdk-overlays
I mean cdkConnectedOverlay can bind to any element some template

@mmmatthew

This comment has been minimized.

Copy link
Author

mmmatthew commented Apr 12, 2019

Thanks, that would be a good workaround if this feature doesn't make sense within Angular Material.

@crisbeto

This comment has been minimized.

Copy link
Member

crisbeto commented Apr 14, 2019

This might be a bit too specific of a use case to have a dedicated API. What we could do instead is expose the badge element as a property on MatBadge and you can set the title yourself. Also it's worth noting that even if there was a title on the badge, right now it won't show up because the badge element has pointer-events: none.

@mmmatthew

This comment has been minimized.

Copy link
Author

mmmatthew commented Apr 15, 2019

Thanks @crisbeto for the counter - proposal. Do we collect other use cases before making a new issue for the element property and closing this, or what is the best way to proceed?

@crisbeto crisbeto self-assigned this Apr 20, 2019

crisbeto added a commit to crisbeto/material2 that referenced this issue Apr 20, 2019

refactor(badge): add method that exposes badge content element
Adds a method that exposes the underlying badge content element. This allows consumers to add their own custom attributes to the badge element, without us having to proxy them through inputs.

Fixes angular#15801.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.