@import "./variables";

.f-truncate-text {
	position: relative;
	font-size: $tableFontSize;
	cursor: help;
	span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}
	&::before,
	&::after {
		display: none;
	}
	&:hover {
		&::before {
			// display: block;
			content: attr(data-tooltip);
			position: absolute;
			bottom: -50px;
			padding: 10px;
			background: $cardColor;
			color: #fff;
			font-size: 14px;
			white-space: nowrap;
		}
		&::after {
			// display: block;
			content: "";
			position: absolute;
			bottom: -16px;
			left: 10px;
			border: 10px solid transparent;
			border-bottom: 10px solid $cardColor;
		}
	}
}