Iris/src/scss/components/_tooltip.scss

.has-tooltip {
	position: relative;

	.tooltip {
		@include animate();
		display: inline-block;
		position: absolute;
		bottom: 37px;
		left: 1px;
		right: auto;
		opacity: 0;
		padding: 8px 10px 6px;
		border-radius: 3px;
		pointer-events: none;
		background: $white;
		color: $black;
		font-size: 11px;
		z-index: 97;
		white-space: nowrap;
		text-align: left;

		&:first-letter {
			text-transform: uppercase;
		}

		&:after {
			content: '';
			display: block;
			width: 6px;
			height: 6px;
			background: $white;
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			position: absolute;
			bottom: -3px;
			left: 9px;
		}
	}

	&:hover {
		.tooltip {
			opacity: 1;
			bottom: 35px;
		}
	}

	&.right-tooltip {
		.tooltip {
			left: auto;
			right: -5px;

			&:after {
				right: 9px;
				left: auto;
			}
		}
	}

	&.large-tooltip {
		.tooltip {
			padding: 8px 12px;
			font-size: 12px;
			line-height: 14px;
			bottom: 50px;
			white-space: wrap;
			max-width: 200px;
		}
	}
}