Igniteui-angular: Feature request: igx-chip - capability to see whole text when a long text is in it.

[tkiryu]

Description

I'd like to have a capability to see the whole text in igx-chip.

• igniteui-angular version: 6.2.0
• browser: N/A

Steps to reproduce

1. Go to https://stackblitz.com/edit/igx-chips-on-grouping-area
2. You can see igx-chip which has a text with ellipsis on group area.

Result

Currently, we cannot see the whole text in igx-chip.

Expected result

I'd like to have a capability to see the whole text in it.

For example,

• Tooltip feature when mouseover.
• Or, Expandable feature when clicking https://material.io/design/components/chips.html#input-chips (It conflicts with existing clicking behavior though...)

Attachments

https://stackblitz.com/edit/igx-chips-on-grouping-area

[simeonoff]

We can add the title attribute to the chips in the grouparea and bind it to the area of the column name so that the full text can be previewed on mouse hover? How does that sound to you @tkiryu ?

[kdinev]

@tkiryu The chip is designed to show limited content inside, which is why it has min and max dimensions by default. If you as a developer want to change the maximum dimensions, then you can do so by using:

.igx-chip__content {
  max-width: 300px;
}

The reason for constraining the chip is in cases when the content put inside is very large, we don't want to make the chip grow indefinitely and make it look ugly inside the application. Example:

Any kind of expandable functionality is up to the developer to implement, using the chip outputs that we've exposed. You can take the material guidelines as example and put in place some expandable functionality.

[kdinev]

@tkiryu I've logged an enhancement issue to add a title attribute to each chip. #3035

[tkiryu]

@simeonoff , thank you for your suggestion! I think that's enough!

[tkiryu]

@kdinev , thank you for your explanation. I agree with you. Thank you for logging #3035!