fix(tooltip-area): refactor tooltip styles for CSP nonce compliance

[carlosrobertoprogramador]

What kind of change does this PR introduce? (check one with "x")

• [ X ] Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Other... Please describe:

What is the current behavior? (You can also link to an open issue here)
The tooltip in the area chart relies on inline style bindings ([style.opacity], [style.cursor]) that cause issues in environments enforcing strict Content Security Policy (CSP).

What is the new behavior?
What is the new behavior?
The tooltip has been refactored to use CSS classes and Angular bindings that properly support enforcement. This fix ensures correct rendering of the tooltip both in CSP-restricted environments with nonce and in environments without CSP.

Does this PR introduce a breaking change? (check one with "x")

• Yes
• [ X ] No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:
Tested in browsers with strict CSP headers requiring nonce and without CSP; tooltip functions correctly in both scenarios without style or security violations.

[bufke]

I applied this to a project and it fixes the CSP issue for me. Would love to see this merged.

BTW there is another unsafe inline style at

ngx-charts/projects/swimlane/ngx-charts/src/lib/bubble-chart/bubble-chart.component.ts

Line 87 in 97d1aad

style="fill: rgb(255, 0, 0); opacity: 0; cursor: 'auto';"

these really don't need to be inline. The same type of fix would apply here. This package ALMOST works with strict CSP.

Basically one should never use style="something"

Now I don't use bubble charts. But upon request, I would be happy to submit a PR and test it just for the betterment of the project.