diff --git a/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.stories.ts b/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.stories.ts
index 9d9d2bad..d9beeea9 100644
--- a/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.stories.ts
+++ b/packages/lib/src/components/charts/lume-bar-chart/lume-bar-chart.stories.ts
@@ -179,8 +179,8 @@ export const CustomTooltip: Story = {
template: `
-
-
+
+
diff --git a/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts b/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
index 10e88ac0..37608afb 100644
--- a/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
+++ b/packages/lib/src/components/charts/lume-line-chart/lume-line-chart.stories.ts
@@ -144,7 +144,7 @@ export const MultipleDatasetsWithCustomTooltip: Story = {
title: 'Pets met in 2023',
options: {
tooltipOptions: {
- enablePointerEvents: true,
+ withPointerEvents: true,
},
},
},
diff --git a/packages/lib/src/components/core/lume-chart/lume-chart.vue b/packages/lib/src/components/core/lume-chart/lume-chart.vue
index f508775a..18a2b533 100644
--- a/packages/lib/src/components/core/lume-chart/lume-chart.vue
+++ b/packages/lib/src/components/core/lume-chart/lume-chart.vue
@@ -192,8 +192,8 @@
:position="tooltipPosition"
:with-tooltip="allOptions.withTooltip !== false"
:hovered-index="internalHoveredIndex"
- :handle-mouse-enter="() => (hoveredTooltip = true)"
- :handle-mouse-leave="() => (hoveredTooltip = false)"
+ :handle-mouse-enter="() => (isHoveringTooltip = true)"
+ :handle-mouse-leave="() => (isHoveringTooltip = false)"
:options="allOptions.tooltipOptions"
>
(-1);
const tooltipAnchor = ref>(null);
const chartContainer = ref>(null);
const tooltipAnchorAttributes = ref>([]);
-const hoveredTooltip = ref(null);
+const isHoveringTooltip = ref(null);
const xAxisHeight = ref(0);
const yAxisWidth = ref(0);
@@ -411,11 +411,11 @@ const tooltipPosition = computed(
const shouldHideTooltip = computed(() => {
const arePointerEventsEnabled =
- allOptions.value.tooltipOptions?.enablePointerEvents;
+ allOptions.value.tooltipOptions?.withPointerEvents;
return (
tooltipConfig.opened &&
(!arePointerEventsEnabled ||
- (arePointerEventsEnabled && hoveredTooltip.value === false))
+ (arePointerEventsEnabled && isHoveringTooltip.value === false))
);
});
@@ -498,7 +498,7 @@ watch(
// Handles the scenario when the cursor is already outside of the chart container but in a tooltip and the user
// tries to leave the tooltip.
-watch(hoveredTooltip, (value) => {
+watch(isHoveringTooltip, (value) => {
if (value === false && tooltipConfig.opened) {
handleHideTooltip();
}
diff --git a/packages/lib/src/components/core/lume-tooltip/lume-tooltip.vue b/packages/lib/src/components/core/lume-tooltip/lume-tooltip.vue
index 64b15c83..7d222304 100644
--- a/packages/lib/src/components/core/lume-tooltip/lume-tooltip.vue
+++ b/packages/lib/src/components/core/lume-tooltip/lume-tooltip.vue
@@ -4,7 +4,7 @@
ref="root"
class="lume-tooltip lume-typography--caption"
:class="{
- 'lume-tooltip--pointer-events': options.enablePointerEvents,
+ 'lume-tooltip--pointer-events': options.withPointerEvents,
}"
data-j-tooltip
@mouseenter="emit('tooltip-mouseenter')"
diff --git a/packages/lib/src/composables/options.ts b/packages/lib/src/composables/options.ts
index 0a747bcd..bde10ab3 100644
--- a/packages/lib/src/composables/options.ts
+++ b/packages/lib/src/composables/options.ts
@@ -33,7 +33,7 @@ export interface TooltipOptions extends Options {
targetElement?: Element | 'self';
titleFormat?: Format;
valueFormat?: Format;
- enablePointerEvents?: boolean;
+ withPointerEvents?: boolean;
withAnimation?: boolean;
}