When using the v-tooltip directive without modifiers, the context passed to a passthrough function does not accurately reflect the true render direction of the tooltip, making it difficult to determine the correct orientation for the tooltip arrow. Additionally, when using the directive with a modifier (e.g., v-tooltip.top), and when forced to render in a different direction due to layout constraints, the context object incorrectly reflects the modifier rather than the actual render direction. This issue can be replicated in a StackBlitz hosted testcase where it's necessary to pop out the preview and adjust the screen size or zoom level to force tooltips to render opposite to their specified direction. For example, the tooltip configured to display at the top may instead render at the bottom.
The following screenshot shows a tooltip forced to render at the bottom despite being set to render at the top:
A console log generated from the following code snippet in main.js indicates that the passed context object does not reflect the change in render direction:
...
const CustomizedLara = usePassThrough(
Lara,
{
directives: {
...Lara.directives,
tooltip: {
...Lara.directives.tooltip,
arrow: (...args) => {
const defaultArrow = Lara.directives.tooltip.arrow(...args);
// context will only reflect directive modifiers, not the actual context (the true direction)
console.log('arrow pt', Object.keys(args[0].context), Object.values(args[0].context));
return defaultArrow;
}
}
}
},
{
mergeSections: true,
mergeProps: false,
}
);
app.use(PrimeVue, {unstyled: true, ripple: true, pt: CustomizedLara});
...
Open a developer tools window to observe the console.
Adjust the window size and browser zoom to force tooltips to render not in their default location.
Mouse over a tooltip that is rendering in an unintended location.
Note that the logged context object only contains keys and values related to the modifiers, without any details reflecting the true render direction.
Expected behavior
The context object (context.left, context.right, context.top, and context.bottom) should accurately reflect the true render direction of the tooltip to enable correct CSS class application for tooltip arrows, rather than merely indicating directive modifiers.
Describe the bug
When using the
v-tooltip
directive without modifiers, the context passed to a passthrough function does not accurately reflect the true render direction of the tooltip, making it difficult to determine the correct orientation for the tooltip arrow. Additionally, when using the directive with a modifier (e.g.,v-tooltip.top
), and when forced to render in a different direction due to layout constraints, the context object incorrectly reflects the modifier rather than the actual render direction. This issue can be replicated in a StackBlitz hosted testcase where it's necessary to pop out the preview and adjust the screen size or zoom level to force tooltips to render opposite to their specified direction. For example, the tooltip configured to display at the top may instead render at the bottom.The following screenshot shows a tooltip forced to render at the bottom despite being set to render at the top:
A console log generated from the following code snippet in
main.js
indicates that the passed context object does not reflect the change in render direction:Reproducer
https://stackblitz.com/~/github.com/jhillacre/primevue-3-vite-issue-template-tvvr1d
PrimeVue version
3.53.0
Vue version
3.x
Language
ALL
Build / Runtime
Vite
Browser(s)
No response
Steps to reproduce the behavior
Expected behavior
The context object (
context.left
,context.right
,context.top
, andcontext.bottom
) should accurately reflect the true render direction of the tooltip to enable correct CSS class application for tooltip arrows, rather than merely indicating directive modifiers.