LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
	font-family: sans-serif;
	margin: 2rem;
	font-size: 120%;
	line-height: 1.6;
}

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip__content {
	position: absolute;
	left: 120%;
	top: calc(50% - 8px);
	min-width: 10rem;
	display: inline-block;
	padding: 0 .4rem;
	background: darkgray;
	color: #fff;
	font-size: .8rem;
	border-radius: .15rem;
}

.tooltip__button {
	padding: .1rem .5rem;
	margin-left: .2rem;
	border-radius: 50%;
	border: 0;
	background: darkgray;
	font-family: serif;
	font-weight: bold;
	color: #fff;
	font-size: .8rem;
}
JS
class ToolTip extends React.Component {
	constructor() {
		super();
		this.state = {
			isOpen: false
		};
		this.handleClick = this.handleClick.bind(this);
		this.handleBlur = this.handleBlur.bind(this);
		this.handleKeyDown = this.handleKeyDown.bind(this);
	}

	handleClick = () => {
		this.setState({
			isOpen: !this.state.isOpen
		});
	};

	handleBlur = () => {
		this.setState({
			isOpen: false
		});
	};

// Esc key closes tooltip				
	handleKeyDown = (event) => {
		if ((event.keyCode || event.which) === 27) {
			this.setState({
				isOpen: false
			})
		}
	}

	render() {
		return (
			
				
				
					{this.state.isOpen ? this.props.info : null}
				
			
		);
	}
}

class App extends React.Component {
	render() {
		return (
			

Inclusive tooltip with React

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos temporibus maxime adipisci excepturi possimus nostrum officia recusandae. Incidunt cumque quasi odio modi{" "} delectus. Quos reprehenderit recusandae similique tenetur, quae aliquid?

Thanks to Heydon Pickering for the write up on inclusive-components.design
); } } ReactDOM.render(, document.querySelector("#app"));

Description

An inclusive tooltip component for React development. Very simple but currently works only for static text.
Term
Wed, 12/27/2017 - 07:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv