Always set a title attribute when truncating text via CSS

[cchaos]

We need to establish a pattern where we add or require the html title attribute on elements that can be truncated with an ellipse. Most consumers don't think of this as necessary and tend to opt for the more intrusive tooltip to show the full text of the truncated element. All that's really necessary is the title attribute so that on long hovers, users can get the full text via the browser's internal tooltip mechanism.

Example: EuiBreadcrumbs

It would also solve issues like #1706

Question

The one concern can be where the child element can be something other than a string (eg node). Is there a way we can pull just the inner text or should we just have the component require a title prop?

[chandlerprall]

Is there a way we can pull just the inner text or should we just have the component require a title prop?

There isn't a clean way to extract a component's inner text, requiring a title prop will be much better.

[cchaos]

Can we only require the title if the contents is not a string?

[chandlerprall]

Yep! The messaging on that isn't controllable in TypeScript files, but we can definitely force an error in that state.

[snide]

Inner text sort of fixed this https://elastic.github.io/eui/#/utilities/inner-text

Do we still think this issue is valid? It seems like the only thing left is just carrying through?

[cchaos]

I think we should audit where we auto-apply truncation and see which components would be enhanced by adding the inner-text component.

[cchaos]

Need to assess the a11y implications of this as well. See #4040 as related

[cchaos]

Closing in favor of a Meta discussion around EuiTooltip flexibility which I've included a link to this discussion but needs to be a part of a greater effort.