spartan-ng / spartan

Cutting-edge tools powering Angular full-stack development.
https://spartan.ng
MIT License
1.46k stars 156 forks source link

Simplified tooltip experience #371

Open marcindz88 opened 2 months ago

marcindz88 commented 2 months ago

Which scope/s are relevant/related to the feature request?

tooltip

Information

I think, it would be very nice to add a version of tooltip that can be used as a simple string input directive, without declaration of nested components and additional elements for every tooltip. The solution could work as the Angular Material tooltip: https://material.angular.io/components/tooltip/overview. For most use cases where advanced tooltip customizations are not required this solution would be good enough and include much less code/boilerplate. Directive input could be used to pass a template, innerHtml content or simple string

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

marcjulian commented 2 months ago

@marcindz88 is this what you are looking for https://github.com/goetzrobin/spartan/pull/232? It's not added to the docs, maybe that would be good to add an example with tooltip passing just a string.

marcindz88 commented 2 months ago

Yes, this works as expected, I also found an example in the story-book, but the docs seem not to include it. Also, it would be nice to be able to set input tooltipContentClasses, which for some reason is not passed down from hlmTooltipTrigger. I think also passing down a simple HTML like or a link would be useful (just a change to innerHtml binding)

I could potentially create a PR for this if somebody accepts these ideas (including docs update, tooltipContentClasses, innerHtml support)

goetzrobin commented 1 month ago

@marcindz88 I am on board with everything but the innerHtml for now. I just want to double check we are not introducing some security risk here, or at least make it clear that you're using innerHTML, e.g. if you render some user input make sure you're not blindly rendering the content

marcindz88 commented 1 month ago

@goetzrobin AFAIK, innerhtml is safe unless sanitation is bypassed on purpose, by the developer. More about it here: https://blog.angular-university.io/angular-innerhtml/