ha-tooltip: fix styles to make more vivid & more similar to existing tooltips

[ildar170975]

Breaking change

Proposed change

Currently we have tooltips generated by a browser like these:

But ha-tooltip looks like this:

It is not vivid enough & differs from other tooltips.

With this PR - ha-tooltips are more vivid and look similar to other toltips:

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[ildar170975]

Also, I do not like an "arrow" element here, I would remove it...

[wendevlin]

So you want to mimic the browsers tooltip style?
Not every Browser has the same style. What to do when the next Browser update changes this design?
I don't see a value here, I just see a lot of maintenance.

[ildar170975]

Ok, let’s not mimic, but make tooltips a bit more vivid since they are barely seen. Will think about it.