Add prettier tooltips for KPI cards

[caddoo]

Description:

Improves the tool tips for the KPI cards for all websites dashboard

(Ref: DEV-18917)

Review

• Functional review done
• Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• Security review done
• Wording review done
• Code review done
• Tests were added if useful/possible
• Reviewed for breaking changes
• Developer changelog updated if needed
• Documentation added if needed
• Existing documentation updated if needed

[caddoo]

Just tested one KPI card tool tip, the logic is reused, I don't want to add too much additional time to the UI test suite.

[michalkleiner]

Just a note here @caddoo, the method it reads nicely when followed by wording that creates a sentence, e.g. here it would be it('should show a tooltip on hover of KPI card').

[sgiehl]

@caddoo Actually it seems like the tooltips are now not working anymore at all for KPIs. Not sure if that is a bug or an issue in the tooltip directive. But I thought it should also work without a title attribute 🤔

[caddoo]

@caddoo Actually it seems like the tooltips are now not working anymore at all for KPIs. Not sure if that is a bug or an issue in the tooltip directive. But I thought it should also work without a title attribute 🤔

@sgiehl

Yeah I noticed that as well during development, I mistakenly thought it started working again while adding it back.

Anyway I looked for a few minutes and couldn't work it out, I don't think I want to spend time looking into jQuery UI tool tips to find out what causes this behavior.

But also your concern about the title showing in the browser native way won't be an issue, if you look at the DOM when the jQuery UI tooltip opens it clears the title attribute anyway 🤷 .

I suppose for the sake of time it's fine just to add the title and move on from this.

[sgiehl]

@caddoo Just for completeness: The behavior is quite easy explained. The jQuery tooltips in the directive are initialized without an items option. That means that it will look for any element (within scope) that has a title attribute and initialize a tooltip for it with the other provided options. To make it work without a title attribute and for a specific element only the tooltip directive would need to be adjusted to allow passing in the items option.