Add `Tooltip` component #360

kevva · 2018-06-14T13:39:25Z

Add margin to the tooltip
Add styles to the arrow for other positions than top
Fine tune styles (maybe some border and shadow)
Add animation while fading in (from top and down)

sindresorhus · 2018-06-14T13:48:49Z

app/renderer/components/Tooltip.js

+	}
+}
+
+export default Tooltip;


Can you add prop-types too? I've been too lazy to do this on the other components, but in hindsight, I should have.

Yeah, I didn't because no other components had it. Will add!

kevva · 2018-06-14T13:54:16Z

app/renderer/components/Tooltip.scss

+	&__arrow {
+		position: absolute;
+		width: 16px;
+		height: 24px;


Will make these variables.

kevva · 2018-06-20T23:08:49Z

app/renderer/components/Tooltip.js

+			<Manager>
+				<Reference>
+					{({ref}) => (
+						<div


Really bothers me that we have to wrap the children in a div since it won't wrap elements with absolute position correctly. I'd really like to be able to pass a ref to children directly. React.forwardRef() only works for components.

TIL: https://bitsofco.de/how-display-contents-works/

That's kinda cool. Doesn't seem to work though. See the screenshot below (don't mind the positioning of the elements inside the seed phrase box, it's just for testing):

Ah, it's only available in Chrome 65, but Electron 2 is at 61. We'll be able to use this when Electron 3 is stable. #374

I added the flag to blinkFeatures, but it didn't work regardless, i.e. instead of getting the wrong position it got no position at all (which the screenshot shows).

kevva · 2018-06-21T00:24:34Z

app/renderer/views/CreatePortfolio/Step2.js

@@ -5,43 +5,67 @@ import ReloadButton from 'components/ReloadButton';
 import CopyButton from 'components/CopyButton';


Had to rewrite this file to use flex inside generated-seed-phrase-container because we currently can't use absolutely positioned targets for our tooltips. flex is nicer than using position: absolute anyway :).

Much better! No idea why I didn't use flexbox in the first place...

kevva · 2018-06-21T00:34:25Z

@sindresorhus, tried to, but didn't come up with any nice border or shadows. Does the animation look good though? Also, should the content animation be in this component or should we pass another component that animates the text as content prop? Depends on how magical we want to make the tooltip.

sindresorhus · 2018-06-21T10:11:58Z

tried to, but didn't come up with any nice border or shadows.

I think it needs something so it doesn't bleed into the background. Try with a slight shadow.

Does the animation look good though?

The animation looks good.

Also, should the content animation be in this component or should we pass another component that animates the text as content prop? Depends on how magical we want to make the tooltip.

What you have now is good. We don't need that kind of manual control.

sindresorhus · 2018-06-21T10:17:40Z

@kevva I noticed that if I hover over the copy button, the click, then take my mouse somewhere else and then hover again, it still shows Copied!. I think it should revert back to the initial value when it's being hidden.

sindresorhus · 2018-06-21T10:04:27Z

app/renderer/components/CopyButton.js

 	return (
 		<button
 			{...props}
 			type="button"
 			className={`${className} CopyButton`}
-			onClick={() => {
+			onClick={e => {


e => event

sindresorhus · 2018-06-21T10:16:30Z

app/renderer/components/Tooltip.scss

@@ -0,0 +1,109 @@
+.Tooltip {
+	--color: var(--border-color);
+	--arrow-height: 8px;


I would make this 7px. It feels a tad bit too tall with 8px.

sindresorhus · 2018-06-21T10:20:36Z

app/renderer/components/Tooltip.js

+			<Manager>
+				<Reference>
+					{({ref}) => (
+						<div


TIL: https://bitsofco.de/how-display-contents-works/

sindresorhus · 2018-06-21T10:22:52Z

app/renderer/views/CreatePortfolio/Step2.js

@@ -5,43 +5,67 @@ import ReloadButton from 'components/ReloadButton';
 import CopyButton from 'components/CopyButton';


Much better! No idea why I didn't use flexbox in the first place...

sindresorhus · 2018-06-21T10:24:33Z

app/renderer/views/CreatePortfolio/Step2.js

+class CreatePortfolioStep2 extends React.Component {
+	state = {
+		isCopied: false,
+	}


Btw, check out https://github.com/hyperdexapp/hyperdex/blob/7d996b46533bc965409f53150b9b037731bc040c/app/renderer/containers/SuperContainer.js#L63-L74 It lets us add state to functional components. No more class mess when you only need a little bit of state.

Sweet. Didn't notice that!

sindresorhus · 2018-06-21T10:25:04Z

package.json

 		"qrcode.react": "^0.8.0",
 		"randoma": "^1.2.0",
 		"react": "^16.3.2",
 		"react-dom": "^16.3.2",
 		"react-extras": "^0.6.0",
+		"react-popper": "1.0.0-beta.6",


1.0.0 final is out

kevva · 2018-06-22T09:16:31Z

Added a slight shadow to it:

@kevva I noticed that if I hover over the copy button, the click, then take my mouse somewhere else and then hover again, it still shows Copied!. I think it should revert back to the initial value when it's being hidden.

Should be fixed. Added an onClose handler to it to reset the state.

kevva · 2018-06-22T09:47:04Z

app/renderer/components/Tooltip.js

+									<div
+										ref={arrowProps.ref}
+										className="Tooltip__arrow"
+										style={arrowProps.style}


Would've wanted to put these into styled-jsx too, but that'd require converting them to a CSS string. Decided not to bother with it.

sindresorhus · 2018-06-25T04:32:41Z

This looks and works perfectly now. Nice work Kevin :)

kevva requested review from sindresorhus and lukechilds June 14, 2018 13:39

sindresorhus reviewed Jun 14, 2018

View reviewed changes

kevva commented Jun 14, 2018

View reviewed changes

kevva force-pushed the tooltips branch from f39b7be to ae38e00 Compare June 19, 2018 13:47

kevva changed the title ~~WIP: Add Tooltip component~~ [WIP]: Add Tooltip component Jun 20, 2018

kevva commented Jun 20, 2018

View reviewed changes

kevva commented Jun 21, 2018

View reviewed changes

sindresorhus suggested changes Jun 21, 2018

View reviewed changes

Add Tooltip component

5f4063d

kevva force-pushed the tooltips branch from a812695 to 5f4063d Compare June 22, 2018 09:16

kevva changed the title ~~[WIP]: Add Tooltip component~~ Add Tooltip component Jun 22, 2018

kevva commented Jun 22, 2018

View reviewed changes

sindresorhus merged commit 5167d76 into master Jun 25, 2018

sindresorhus deleted the tooltips branch June 25, 2018 04:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `Tooltip` component #360

Add `Tooltip` component #360

kevva commented Jun 14, 2018 •

edited by sindresorhus

Loading

sindresorhus Jun 14, 2018

kevva Jun 14, 2018

kevva Jun 14, 2018

kevva Jun 20, 2018

sindresorhus Jun 21, 2018

kevva Jun 21, 2018

sindresorhus Jun 22, 2018

kevva Jun 22, 2018 •

edited

Loading

kevva Jun 21, 2018 •

edited

Loading

sindresorhus Jun 21, 2018

kevva commented Jun 21, 2018 •

edited

Loading

sindresorhus commented Jun 21, 2018

sindresorhus commented Jun 21, 2018

sindresorhus Jun 21, 2018

sindresorhus Jun 21, 2018

sindresorhus Jun 21, 2018

sindresorhus Jun 21, 2018

sindresorhus Jun 21, 2018

kevva Jun 21, 2018

sindresorhus Jun 21, 2018

kevva commented Jun 22, 2018 •

edited

Loading

kevva Jun 22, 2018

sindresorhus commented Jun 25, 2018

		@@ -5,43 +5,67 @@ import ReloadButton from 'components/ReloadButton';
		import CopyButton from 'components/CopyButton';

Add Tooltip component #360

Add Tooltip component #360

Conversation

kevva commented Jun 14, 2018 • edited by sindresorhus Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevva Jun 22, 2018 • edited Loading

Choose a reason for hiding this comment

kevva Jun 21, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevva commented Jun 21, 2018 • edited Loading

sindresorhus commented Jun 21, 2018

sindresorhus commented Jun 21, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevva commented Jun 22, 2018 • edited Loading

Choose a reason for hiding this comment

sindresorhus commented Jun 25, 2018

Add `Tooltip` component #360

Add `Tooltip` component #360

kevva commented Jun 14, 2018 •

edited by sindresorhus

Loading

kevva Jun 22, 2018 •

edited

Loading

kevva Jun 21, 2018 •

edited

Loading

kevva commented Jun 21, 2018 •

edited

Loading

kevva commented Jun 22, 2018 •

edited

Loading