Tooltip component triggered by mouse-over-series events. When mounted, the tooltip component
registers a mouse-over handler with the {@link useChart} hook using the
{@link UseChartValues.registerTooltipContentProvider} function. The handler renders the tooltip
by adding it to the SVG plot container. However, to remain general, this Tooltip also
uses the {@link useChart}'s {@link UseChartValues.tooltipContentProvider} to render the actual
content of the tooltip. The content provider is given the series' name on which the mouse-over
event occurred, the plot time associated with mouse-over event, and the TimeSeries
associated with the mouse-over event. The plot (for example ScatterPlot) is responsible
for rendering the tooltip, and it registers this tooltip-content provider with the {@link useChart}
hook.
The {@link useChart} hook allows the plots and this tooltip to register methods needed its siblings.
The plot (for example ScatterPlot) adds a d3 mouse-enter and mouse-leave event handlers
to each series. The mouse-enter event handler performs a few tasks and then calls the
mouse-over event handler registered by the Tooltip via the {@link useChart} hook.
The plot (for example ScatterPlot) registers the tooltip-content provider with the {@link useChart}
hook using the {@link UseChartValues.registerTooltipContentProvider} function.
Tooltip registers the handler for mouse-over events. The handler accepts the series
name, plot time, and time-series associated with the mouse-over event, and returns the tooltip
dimensions. In order to create/render the tooltip, it uses the {@link UseChartValues.tooltipContentProvider}
function that was registered via the {@link useChart} hook.
When the plot's (for example ScatterPlot) d3 mouse-enter event handler fires, the plot calls this
Tooltip's mouse-over handler, which creates the tooltip, and calls the {@link UseChartValues.tooltipContentProvider}
registered by the plot to render the tooltip content, and get the tooltip size.
Tooltip component triggered by mouse-over-series events. When mounted, the tooltip component registers a mouse-over handler with the {@link useChart} hook using the {@link UseChartValues.registerTooltipContentProvider} function. The handler renders the tooltip by adding it to the SVG plot container. However, to remain general, this Tooltip also uses the {@link useChart}'s {@link UseChartValues.tooltipContentProvider} to render the actual content of the tooltip. The content provider is given the series' name on which the mouse-over event occurred, the plot time associated with mouse-over event, and the TimeSeries associated with the mouse-over event. The plot (for example ScatterPlot) is responsible for rendering the tooltip, and it registers this tooltip-content provider with the {@link useChart} hook.
The {@link useChart} hook allows the plots and this tooltip to register methods needed its siblings.
on mount
on mouse-over event
When the plot's (for example ScatterPlot) d3 mouse-enter event handler fires, the plot calls this Tooltip's mouse-over handler, which creates the tooltip, and calls the {@link UseChartValues.tooltipContentProvider} registered by the plot to render the tooltip content, and get the tooltip size.