-
Notifications
You must be signed in to change notification settings - Fork 240
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
Expose popover state.standing as a CSS class on Popover element #102
Comments
@raulmatei Oh, didn't realize that, but still there is one problem with that solution - we are moving the tip with -1 to overlap the body boarder - your example works only for 'above', and there is no way from css to know where the popover got rendered, so I still need exposed state to apply correct margin value to the tip |
Yep, that's an issue, indicating current position through a CSS class will work better. Still you could "hack" it with attributes selectors, but it gets very complex and ugly. It can be a temporary solution if you are forced to do it: /* left position */
.Popover-body[style*="order: -1"] + .Popover-tip[width="7"] {
margin-left: -1px;
}
/* right position */
.Popover-body[style*="order: 1"] + .Popover-tip[width="7"] {
margin-right: -1px;
}
/* below position */
.Popover-body[style*="order: 1"] + .Popover-tip[width="14"] {
margin-bottom: -1px;
}
/* above position */
.Popover-body[style*="order: -1"] + .Popover-tip[width="14"] {
margin-top: -1px;
} |
@raulmatei thanks for the workaround hack is CSS. Still, if that would be ok, I think I could easly add the few lines of code that append position class to the main element based on some prop like 'appendPopoverPositionClass' |
This feature is now available in https://github.com/littlebits/react-popover/releases/tag/0.4.18! Thanks @raulmatei for the support! |
Hey,
I'm currently writing my own component on top of this one, to apply some custom styles to the popover. Only issue I'm facing is the tip/arrow thing. its easy to style with one color tooltips, but my case has a popover with a border. To workaround this, I'm creating a CSS triangle on top of the SVG Tip thats moved by 1 pixel to direction of where popover is standing (it creates 1px wide border-like look). It works great, when I specify explicitly the place where the tooltip must be rendered (as then my component can append correct class to the element) but it's impossible to work with proffered place - I cannot determine where popover gonna get rendered, so cannot append correct class name to it.
Could I implement optional prop (bool) that if passed, would append the state.standing as a css class to the Popover master element? It would help to solve my issue and wouldn't conflict with other usages by default
The text was updated successfully, but these errors were encountered: