.p5-tooltip-box {
	display: inline-block;
	position: relative;
	.p5-tooltip-hoverbox {
		position: absolute;
		z-index: 100;
		line-height: 16px;
		white-space: nowrap;
		font-size: 12px;
		text-align: left;
		.p5-tooltip-hoverbox-content {
			background: #fff;
			min-width: 100px;
			padding: 8px 12px;
			border: 1px solid #eee;
			display: block;
			border-radius: 4px;
			transform-origin: center;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
		}
		.p5-tooltip-hoverbox-arrow {
			position: absolute;
			width: 0;
			height: 0;
			border-width: 8px;
			border-color: transparent;
			border-style: solid;
			transform-origin: center;
			&:before {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border-width: 7px;
				border-color: transparent;
				border-style: solid;
			}
		}
	}
}
/* top */
.p5-tooltip-box[position^='top'] {
	.p5-tooltip-hoverbox-arrow {
		border-top-color: #eee;
		bottom: 1px;
		transform: translate(-50%, 100%);
		&:before {
			border-top-color: #fff;
			top: -9px;
			left: -7px;
		}
	}
}

.p5-tooltip-box[position='top'] {
	.p5-tooltip-hoverbox {
		left: 50%;
		transform: translate(-50%, 0);
	}
	.p5-tooltip-hoverbox-arrow {
		left: 50%;
	}
}

.p5-tooltip-box[position='top-left'] {
	.p5-tooltip-hoverbox {
		left: 0;
	}
	.p5-tooltip-hoverbox-arrow {
		left: 16px;
	}
}

.p5-tooltip-box[position='top-right'] {
	.p5-tooltip-hoverbox {
		right: 0;
	}
	.p5-tooltip-hoverbox-arrow {
		right: 16px;
	}
}

/* right */
.p5-tooltip-box[position^='right'] {
	.p5-tooltip-hoverbox-arrow {
		border-right-color: #eee;
		left: 1px;
		&:before {
			border-right-color: #fff;
			top: -7px;
			left: -5px;
		}
	}
}
.p5-tooltip-box[position='right'] {
	.p5-tooltip-hoverbox {
		top: 50%;
		left: auto;
		transform: translate(100%, -50%);
	}
	.p5-tooltip-hoverbox-arrow {
		top: 50%;
		transform: translate(-100%, -50%);
	}
}

.p5-tooltip-box[position='right-top'] {
	.p5-tooltip-hoverbox {
		top: 0;
		transform: translate(100%, 0);
	}
	.p5-tooltip-hoverbox-arrow {
		top: 6px;
		transform: translate(-100%, 0);
	}
}

.p5-tooltip-box[position='right-bottom'] {
	.p5-tooltip-hoverbox {
		bottom: 0;
		transform: translate(100%, 0);
	}
	.p5-tooltip-hoverbox-arrow {
		bottom: 6px;
		transform: translate(-100%, 0);
	}
}

/* bottom */

.p5-tooltip-box[position^='bottom'] {
	.p5-tooltip-hoverbox-arrow {
		top: -15px;
		border-bottom-color: #eee;
		&:before {
			border-bottom-color: #fff;
			top: -5px;
			left: -7px;
		}
	}
}

.p5-tooltip-box[position='bottom-left'] {
	.p5-tooltip-hoverbox {
		left: 0;
	}
	.p5-tooltip-hoverbox-arrow {
		left: 16px;
	}
}

.p5-tooltip-box[position='bottom'] {
	.p5-tooltip-hoverbox {
		left: 50%;
		transform: translate(-50%, 0);
	}
	.p5-tooltip-hoverbox-arrow {
		left: 50%;
		transform: translate(-50%, 0);
	}
}

.p5-tooltip-box[position='bottom-right'] {
	.p5-tooltip-hoverbox {
		right: 0;
	}
	.p5-tooltip-hoverbox-arrow {
		right: 16px;
	}
}

/* left */
.p5-tooltip-box[position^='left'] {
	.p5-tooltip-hoverbox-arrow {
		border-left-color: #eee;
		right: -15px;
		&:before {
			border-left-color: #fff;
			top: -7px;
			left: -9px;
		}
	}
}

.p5-tooltip-box[position='left'] {
	.p5-tooltip-hoverbox {
		top: 50%;
		transform: translate(-100%, -50%);
	}
	.p5-tooltip-hoverbox-arrow {
		top: 50%;
		transform: translate(0, -50%);
	}
}

.p5-tooltip-box[position='left-top'] {
	.p5-tooltip-hoverbox {
		top: 0;
		transform: translate(-100%, 0);
	}
	.p5-tooltip-hoverbox-arrow {
		top: 6px;
	}
}

.p5-tooltip-box[position='left-bottom'] {
	.p5-tooltip-hoverbox {
		bottom: 0;
		transform: translate(-100%, 0);
	}
	.p5-tooltip-hoverbox-arrow {
		bottom: 6px;
	}
}