Merge pull request #501 from vizzuhq/marker-label-tooltip

Tooltip on marker labels.

Author: simzer

CHANGELOG.md

@@ -28,6 +28,7 @@
 - When X axis dimension labels are close to each other, they are rotated to avoid overlapping.
 - The event handler registration order changed. Now the handlers are called in the opposite order of the registration.
 - Added the padded rectangle, the bounding rectangle and the align parameter to the draw text event object.
+- Tooltip works on marker labels too.
 
 ## [0.9.3] - 2023-12-20
 

src/apps/weblib/ts-api/plugins/tooltip.ts

@@ -1,5 +1,5 @@
 import { Snapshot } from '../module/cchart.js'
-import { Element, Marker, PointerEvent } from '../events.js'
+import { Element, Marker, MarkerLabel, PointerEvent } from '../events.js'
 import { Plugin, type PluginHooks, type PrepareAnimationContext } from '../plugins.js'
 
 import Vizzu from '../vizzu.js'
@@ -71,8 +71,8 @@ export class Tooltip implements Plugin {
 	_mouseon(param: PointerEvent): void {
 		this._id++
 		const id = this._id
-		if (param.target && this._isMarker(param.target)) {
-			const markerId = param.target.index
+		const markerId = this._getMarkerId(param.target)
+		if (markerId !== null) {
 			setTimeout(() => {
 				this._in(id, markerId)
 			}, 0)
@@ -86,6 +86,8 @@ export class Tooltip implements Plugin {
 	_getMarkerId(target: Element | null): number | null {
 		if (target && this._isMarker(target)) {
 			return target.index
+		} else if (target && this._isMarkerLabel(target)) {
+			return target.parent.index
 		} else {
 			return null
 		}
@@ -95,6 +97,10 @@ export class Tooltip implements Plugin {
 		return target.tagName === 'plot-marker'
 	}
 
+	_isMarkerLabel(target: Element): target is MarkerLabel {
+		return target.tagName === 'plot-marker-label'
+	}
+
 	_in(id: number, markerId: number): void {
 		if (this._id === id) {
 			if (!this._animating) {