Feeqt-rq : Support for HTML in tooltip

[AhsanAyaz]

feature request:

What is the expected behavior?

Tooltip should be able to render HTML for advance/custom tooltips. See attached image as an example.

What is the current behavior?

HTML is not supported inside tooltip

What is the use-case or motivation for changing an existing behavior?

To have dynamic templates under tooltip which is required in some complex applications.

EXAMPLE

[julianobrasil]

I think this would be contrary to material design specs which states that:

Tooltips don’t display rich information including images and formatted text.
Tooltips are different than ALT-attributes, which are intended primarily for static images.
Tooltips don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.

I didn't see anything in the specs like bootstrap's popover, so I'm not sure there will be such a component someday in the official set. But, as soon as CDK is out, probably will be done in community projects.

Anyway, take a look at this discussion: #2691

[AhsanAyaz]

@julianobrasil
I've already implemented a demo (in the demo app) and the implementation support on my fork.
I didn't want to include another library for the HTML support for my project so i'll probably use my fork in the project. And yes there isn't anything like popover in material.
I might be creating a pull request anyway. You can at least run it and see how that looks :)

[julianobrasil]

I cloned your feat-tooltip-cust-html, but couldn't see anything different in the tooltip. Have I cloned the wrong branch?

[AhsanAyaz]

@julianobrasil I have changed the src/lib/tooltip/tooltip.ts which can be seen in the changes in the PR. I've also modified the demo of tooltip inside the src/demo-app/tooltip.
After you've cloned the branch, you should be able to do gulp serve:devapp and see two buttons as can be seen in the attachment. One working with our regular old message string and other with html.

Please let me know if that's not the case.

[julianobrasil]

My mistake. I was building the master instead of the feat-tooltip-cust-html branch. Now I see it. Well, I think the change is nice (although, in the demo page it raises expectations that the html tooltip will change color if you click on the "Toogle tooltipClass" button as it happens with the master branch demo).

The pros:

• There's no need for a whole new component
• All you need is a class to make things up and running

The cons:

• It doesn't follow the material specs (maybe it should be a whole new component for this reason - the official set should stick to the specs as much as possible)

Sugestion:

• There's no need for the little arrow, as the animation source works as the origin of the popup. As stated in material guide lines for the original tooltip: "(...) rely on motion emanating from the source to convey direction."

[mmalerba]

@andrewseguin is this something we want to support in tooltip?

[jelbourn]

When designing the tooltip we deliberately decided not to support this. The Material Design spec is rather prescriptive about only text appearing in tooltips. Rich content also presents a challenge for a11y.

[AT-Rocha]

Sorry, I know it is a closed issue, but what about how to implement i18n to mat Tooltip ?
One possible use would be:

<ng-template style="" #inRet i18n="@@groupIncludeYard" >Another Text.</ng-template> <mat-list-item [matTooltip]="inRet" [matTooltipPosition]="'above'" >SOME TEXT </mat-list-item>

Today it returns [object Object] in the Tooltip.

Or there is another way ? Thanks.

[malikfaizanhaider]

@AhsanAyaz how you add arrow on tooltip?

[tatsujb]

using unicode, on the other hand works.

so there's a lot you can do there including controlling where your text line-breaks with \u00A0 instead of a space.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}