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

Make FG_SIZE & BG_SIZE props #77

Open
ndelangen opened this issue Sep 13, 2018 · 3 comments
Open

Make FG_SIZE & BG_SIZE props #77

ndelangen opened this issue Sep 13, 2018 · 3 comments

Comments

@ndelangen
Copy link

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
Copy link
Author

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
Copy link
Collaborator

Redmega commented Sep 19, 2018

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
Copy link
Author

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

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

vs

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

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

2 participants