feat: Add annotations tooltip for Time Series charts

What does this MR do?

1. A dedicated bottom placement tooltip for annotations. This tooltip lives alongside the existing data tooltip.
2. Updates the chart tooltip component to have unique Ids. This helps in cases where charts have multiple tooltips.
3. Updated area and line chart to have multiple tooltips.

Decisions rationale

1. Why a second tooltip?

Because we use custom tooltips and the limitations of echarts library, it was easier to have two tooltips instead of reusing. More info added in about this in the components.

2. Why add another mouseover/mouseout listener?

The existing listener are attached to chart.getDom() which is the parent container. This MR listens to mouseover and mouseout of chat data points. This helps differentiate before data tooltip and annotations (markPoint) tooltip.

3. Why no UX approval?

This MR merely adds a tooltip that is bottom placed. The actual annotation arrows shown in this MR are a part of the options passed to the time series charts. UX will be involved in the final GitLab MR that composes these options gitlab!28394 (merged).

Screenshots

header	header
Design mockup
Before
After
In GitLab

Mentions: gitlab#211418 (closed)