Skip to content

Instantly share code, notes, and snippets.

@stevenlaidlaw stevenlaidlaw/index.html
Last active Jun 4, 2019

Embed
What would you like to do?
Basic react page with info buttons that look bad
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<style>
body {
font-family: sans-serif;
overflow: hidden;
}
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 8px;
}
.spacer {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.row {
display: flex;
}
.buttonContainer {
overflow: hidden;
}
.buttonContainer > button {
padding: 16px;
font-size: 1.1em;
border: 1px solid #bbb;
background: #ddd;
border-radius: 4px;
}
.info {
position: absolute;
top: 50%;
left: calc(50% - 120px);
width: 200px;
background-color: cornflowerblue;
color: white;
padding: 20px;
border-radius: 4px;
text-transform: uppercase;
text-align: center;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Main extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<InfoButton label="Top Left"/>
<div className="spacer"/>
<InfoButton label="Top Right"/>
</div>
<div className="spacer middle">
<InfoButton label="Middle"/>
</div>
<div className="row">
<InfoButton label="Bottom Left"/>
<div className="spacer"/>
<InfoButton label="Bottom Right"/>
</div>
</div>
);
}
}
class InfoButton extends React.Component {
constructor() {
super();
this.state = {
open: false
};
}
onToggle = () => this.setState({open: !this.state.open});
render() {
const {label} = this.props;
const {open} = this.state;
return (
<div className="buttonContainer">
<button onClick={this.onToggle}>{label}</button>
{open ? <div className="info" onClick={this.onToggle}>This is the tooltip for {label}</div> : undefined}
</div>
)
}
}
ReactDOM.render(<Main/>, document.getElementById('root'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.