Applying custom transformation on popper

[ablamunits]

Hi,

I am trying to apply a custom transformation to the popper element, depending on weather the popper is visible or not.

To be more specific, I am implementing a tooltip component that holds a state of isVisible.
Based on this state, I would like to apply a custom style object on popper with my own CSS value for transform.

For example, If the tooltip isn't visible I would like to position it slightly higher (relative to the target), so that once it becomes visible again, I will be able to animate it.

Is there a way for me to intervene with the calculation of the to-be applied style and make changes to it to force popper render with these styles?

Thanks,

[FezVrasta]

Yes sure,

here is where Popper.js computes the styles that need to be applied to the popper element.

After that, the applyStyle is just going to set the styles that have been computed in the previous step.

react-popper replaces the applyStyle modifier with its own React specific code

You can then inject a custom modifier after computeStyles that replaces the value of the data.styles.transform with whatever you prefer.

[ablamunits]

Thanks for the quick reply @FezVrasta, and thank you for pointing me in the right direction. This helped me achieve what I wanted. However I did get to it only after a bit of trial and error. For example, what eventually worked for me was this:

const myExampleModifier = {
	enabled: true,
	order: 860,
	fn: (data: any) => {
		const isVisible = this.state.isVisible;

		const left = Math.floor(data.popper.left);
		const top = Math.floor(data.popper.top);
		const newTop = isVisible ? top : top - 10; // Change the top position if popper is hidden

		const transform = `translate3d(${left}px, ${newTop}px, 0px)`;

		// Update popper, offsets and styles object
		const popper = {...data.popper, left, top: newTop};
		const offsets = {...data.offsets, popper};
		const styles = {...data.styles, opacity, transform};

		return {...data, offsets, styles};
	}
};

What I did not understand is why it was necessary for me to change the offsets and styles objects to make this work? Is this the correct way I should go to achieve the desired effect? Sorry for the vague question - I am just making sure I am not missing anything as I am still studying this library :)

Thank you for your help.

[jackson-sandland]

Bueller? Would be great to know if the solution is a hack or considered idiomatic. :)

[FezVrasta]

the modifier system is at the core of Popper.js, feel free to use it, definitely not an hack!