tooltip.scss

/*
*	Tooltip
*	Block: .tooltip
*	Elements:
*	Modifiers:
*/

.tooltip {
	display: inline-block;
	position: relative;
	border-bottom: 1px dashed $color-2;
	transition: all .4s ease-in;
	&:hover {
		cursor:help;
	}
	&:hover:before {
		@include font-text;
		content: attr(data-tooltip);
		position: absolute;
		bottom: 135%;
		left: 50%;
		min-width: 120%;
		width: auto;
		max-width:200%;
		z-index: 999;
		padding: 7px;
		margin-left: -50%;
		font-size: 14px;
		line-height: 16px;
		text-align: left;
		color: #fff;
		background: $color-2;
		border-radius: 3px;
		text-transform: none;

		box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 2px;
		border-color: $color-2 transparent transparent transparent;
	}
	&:hover:after  {
		content:"";
		position: absolute;
		left: 5px;
		bottom: 94%;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 10px 5px 0 5px;
		border-color: $color-2 transparent transparent transparent;
		z-index:999;
	}
}