primevue-tailwind
primevue-tailwind copied to clipboard
Incorrect rendering of tooltip
Hello,
Workin with tooltips with the laura preset, I encountered two issues.
When a tooltip renders. the external shadow is a few pixels farther than the actual content box on vertical or horizontal axis depending on the tooltip's position. It is due to the CSS having:
root: ({ context, props }) => ({
class: [ 'shadow-md' ],
}),
But the shadow-md
class should better be on the text
item, not root
.
Secondly, when the tooltip cannot render where it should, it changes position, but the arrow still renders depending on the intended position, i.e. the position where the tooltip is actually not.
I did not find how to fix it, but I bet this part is wrong :
arrow: ({ context, props }) => ({
class: [
{
'border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-surface-600': context?.right || (!context?.right && !context?.left && !context?.top && !context?.bottom),
'border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-surface-600': context?.left,
'border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-surface-600': context?.top,
'border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-surface-600': context?.bottom
},
]
}),
In that context.left | right | bottom | top
seems to be the intended position but not the actual rendering position, but styles should depend on the actual position.