-
-
Notifications
You must be signed in to change notification settings - Fork 188
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
Auto-position arrow #54
Comments
I've managed to solve this with // ./util/placeArrow.js
import positions from 'positions';
const placementsMap = {
tc: 'top center',
bc: 'bottom center',
cl: 'center right',
cr: 'center left',
};
export default function placeArrow(tooltipEl, align) {
const arrowEl = tooltipEl.querySelector('.tooltip-component-arrow');
const targetEl = this.getRootDomNode(); // eslint-disable-line no-invalid-this
const position = positions(arrowEl, placementsMap[align.points[0]], targetEl, placementsMap[align.points[1]]);
if (align.points[0] === 'tc' || align.points[0] === 'bc') {
arrowEl.style.top = '';
arrowEl.style.left = `${position.left}px`;
} else {
arrowEl.style.top = `${position.top}px`;
arrowEl.style.left = '';
}
} then just set the Anyway I would love to have this built in. |
Can we have this built in? It looks awesome! |
If the above snippet doesn't work for you, try changing |
Looks like someone created a PR #166 |
@satazor can you give an example of how apply this solution, please? thanks in advance |
Hello @vicchirino, check this out: https://github.com/npms-io/npms-www/tree/master/src/shared/components/tooltip. The tooltip component is using utils/placeArrow and utils/checkEdges |
Is there any update about this issue being getting resolved? |
When
overflow.adjustX
and/oroverflow.adjustY
is true, then the box was auto-adjusted to not go offscreen. In those cases, I expected the arrow to be positioned accordingly.In the screenshot below, the arrow position should be pointing to the
deprecated
flag.The text was updated successfully, but these errors were encountered: