Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tooltip overridePosition arguments are inconsistent #516

Closed
gagandeepgill opened this issue Oct 11, 2019 · 1 comment
Closed

tooltip overridePosition arguments are inconsistent #516

gagandeepgill opened this issue Oct 11, 2019 · 1 comment

Comments

@gagandeepgill
Copy link

I'm trying to get the offsetWidth of the element to properly adjust the position of the tooltip depending on the length of the text. But the overridePosition call happens twice for showTooltip and updatePosition. Where it gives me the incorrect offsetWidth the second time.

https://github.com/wwayne/react-tooltip/blob/ccb8b58a6762f3393f7d71c157c64ae24a81674c/src/index.js#L313-L314

https://github.com/wwayne/react-tooltip/blob/ccb8b58a6762f3393f7d71c157c64ae24a81674c/src/index.js#L489-L490


This is what it gives me using currentTarget.offsetWidth in overridePosition callback.

overridePosition={({ left, top }, _currentEvent, currentTarget) => {
	console.log('currentTarget', currentTarget.offsetWidth);
	if (position === 'left') {
		left = left + currentTarget.offsetWidth * 0.25;
	}
	if (position === 'right') {
		left = left - currentTarget.offsetWidth * 0.25;
	}
    return { top, left };
}}

Screen Shot 2019-10-11 at 11 43 32 AM


The workaround I did to get the correct offsetWidth.

overridePosition={({ left, top }) => {
	// Gets the element's width to be used to adjust the positioning of
	// the tooltip dependent on the Popover position prop
	const element = document.getElementById(id || uid);
    const tooltipWidth = element ? element.offsetWidth : 0;

	if (position === 'left') {
		left = left + tooltipWidth * 0.25;
	}
    if (position === 'right') {
		left = left - tooltipWidth * 0.25;
    }
    return { top, left };
}}
finikwashere pushed a commit to finikwashere/react-tooltip that referenced this issue Feb 5, 2020
@roggervalf
Copy link
Contributor

Hi @gagandeepgill could you please try the last release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants