romainberger / react-portal-tooltip

Awesome React tooltip
http://romainberger.github.io/react-portal-tooltip/
MIT License
405 stars 73 forks source link

Make FG_SIZE & BG_SIZE props #77

Open ndelangen opened 6 years ago

ndelangen commented 6 years ago

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?

ndelangen commented 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.

Redmega commented 6 years ago

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

ndelangen commented 6 years ago

The arrow would be positioned further from the edge of the tooltip.

┌^--------┐
|         |
└---------┘

vs

┌--^------┐
|         |
└---------┘