Open ndelangen opened 6 years ago
I was able to get the visual I wanted using the transform property:
const style = {
// TODO: take from theme
style: {
minWidth: 250,
borderRadius: 4,
backgroundColor: '#ffffff',
boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.05)',
transition: 'none',
animation: `${appear.name} 0.16s linear`,
transform: 'translateX(-10px)',
},
arrowStyle: {
color: 'white',
borderColor: false,
transform: 'translateX(10px)',
},
};
Sadly this only works for my exact use-case. When the arrow is in another place it will look out of place.
More padding around the arrow
Can you explain? Not understanding what the expectation here would be. Would the arrow be smaller? More space between the tooltip and the arrow? Screenshots would be helpful
The arrow would be positioned further from the edge of the tooltip.
┌^--------┐
| |
└---------┘
vs
┌--^------┐
| |
└---------┘
Hey, I'd like my ToolTip to have a bit more padding around the arrow.
If i understand the code correctly the FG_SIZE & BG_SIZE constants are used for calculating the paddings/margins/positions.
Would you accept a PR making these constants props?