Card grid category v1 - Uikit 3

card-grid-category-v1-uikit-3.markdown

Card grid category v1 - Uikit 3

A Pen by Beibit Sakhanov on CodePen.

License.

index.html

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>

<!-- UIkit SECTION -->
<div class="uk-section uk-section-default">
    <div class="uk-container">
		<div class="uk-margin uk-grid-match uk-grid-collapse uk-child-width-1-4@l uk-text-center" uk-grid>
			<!-- UIkit CARD 1 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="far fa-newspaper fa-3x"></i></span>
							<span class="uk-icon hover"><i class="far fa-newspaper fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Actuality</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Actuality various</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 2 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fas fa-ribbon fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fas fa-ribbon fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Charity</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Charitable organization</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 3 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fab fa-joomla fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fab fa-joomla fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">CMS</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Content Management System</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 4 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="far fa-comment-dots fa-3x"></i></span>
							<span class="uk-icon hover"><i class="far fa-comment-dots fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Dating</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Online dating service</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 5 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fas fa-code fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fas fa-code fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Developer</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Developing</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 6 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fas fa-cogs fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fas fa-cogs fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Framework</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Framework for developing</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 7 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fas fa-server fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fas fa-server fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Host</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Web hosting service</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 8 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fas fa-film fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fas fa-film fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Movie</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Online movie service</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 9 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fas fa-cogs fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fas fa-cogs fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Framework</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Framework for developing</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 10 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fab fa-joomla fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fab fa-joomla fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">CMS</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Content Management System</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 11 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fas fa-code fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fas fa-code fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Developer</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Developing</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD 12 -->
			<div class="uk-visible-toggle" tabindex="-1">
			    <div class="uk-margin uk-card uk-card-default uk-card-hover">
				    <!-- UIkit CARD BODY -->
					<div class="uk-card-body">
					    <a class="uk-link-reset uk-position-cover" href="#"></a>
						<div class="uk-flex uk-flex-center">
							<span class="uk-icon default"><i class="fas fa-server fa-3x"></i></span>
							<span class="uk-icon hover"><i class="fas fa-server fa-3x"></i></span>
						</div>
						<h3 class="uk-card-title uk-margin">Host</h3>
					</div>
					<!-- UIkit CARD FOOTER DEFAULT -->
					<div class="uk-card-footer default">
						<p>Web hosting service</p>
					</div>
					<!-- UIkit CARD FOOTER HOVER -->
					<div class="uk-card-footer uk-hidden-hover">
						<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
						    <div class="uk-navbar-center uk-navbar-item">
							    <ul class="uk-navbar-nav">
								    <li><a class="tooltip-top" href="#" data-tooltip="46"><span class="uk-icon uk-margin-small-right"><i class="far fa-eye"></i></span>Hits</a></li>
									<li><a class="tooltip-top" href="#" data-tooltip="81"><span class="uk-icon uk-margin-small-right"><i class="fas fa-archive"></i></span>Websites</a></li>
									<li class="uk-padding-remove"><a class="tooltip-top" href="#" data-tooltip="Social"><span class="uk-icon uk-margin-small-right"><i class="fas fa-share-alt"></i></span>Share</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>
			</div>
			<!-- UIkit CARD -->
		</div>
	</div>
</div>

style.css

/* Card Default */
.uk-card-default {
	background: #fbfbfb !important;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.4) !important;
	border-top: 5px solid transparent;
	border-left: 1px solid rgba(0,0,0,0.1);
	border-right: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

/* Card Default Hover */
.uk-card-default.uk-card-hover:hover {
    background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 100%) !important;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1) !important;
    border-top: 5px solid #ec483b;
    border-left: 0;
	border-right: 0;
	border-bottom: 0;
    z-index: 1;
    transform: scale(1.1);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

/* Card Body */
.uk-card-body {
    padding: 20px 20px !important;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-card-body {
	    padding: 20px 20px !important;
	}
}

/* Card Title */
.uk-card-default .uk-card-title {
    color: #666 !important;
}

/* Card Title Hover */
.uk-card-default.uk-card-hover:hover .uk-card-title {
    color: #666 !important;
}

/* Card Icon */
.uk-card-default.uk-card-hover span.hover {
    display: none;
}

.uk-card-default.uk-card-hover span.default {
    display: inherit;
    color: #1e87f0;
}

/* Card Icon Hover */
.uk-card-default.uk-card-hover:hover span.hover {
    display: inherit;
	color: #ec483b;
}

.uk-card-default.uk-card-hover:hover span.default {
    display: none;
}

/* Card Footer */
.uk-card-footer {
	background: linear-gradient(to bottom, #ececec 0%, #f5f5f5 100%) !important;
	padding: 15px 15px !important;
}

/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-card-footer {
	    padding: 15px 15px !important;
	}
}

.uk-card-default.uk-card-hover:hover .uk-card-footer {
    background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 100%) !important;
}

/* Card Footer Text */
.uk-section-default .uk-card-default .uk-card-footer p {
	text-align: center;
	font-size: 0.75rem;
	line-height: 150%;
	margin: 10px 0;
	letter-spacing: 0.5px;
}

/* Card Footer Default */
.uk-card-default.uk-card-hover div.default {
    display: inherit;
	padding: 5px 5px !important;
	height: 41px;
}

.uk-card-default.uk-card-hover:hover div.default {
    display: none;
}

/* Card Navbar Item */
li {
	display: inline;
	list-style: none;
	padding-right: 20px;
}

.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
    min-height: 0px !important;
    padding: 0 0px !important;
}

/* Card Tooltip */
[data-tooltip] {
	cursor: pointer;
	position: relative;
	/********** Default Behavior ********* */
	/********** Timeout Variant ********* */
	/********** Tooltip Sizes ********* */
	/********** Top Tooltip ********* */
	/********** Right Tooltip ********* */
	/********** Bottom Tooltip ********* */
	/********** Left Tooltip ********* */
}

[data-tooltip]:before, [data-tooltip]:after {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: all 0.15s cubic-bezier(0.5, 1, 0.25, 1);
	z-index: 1;
}

[data-tooltip]:before {
	padding: 5px;
	width: 50px;
	border-radius: 3px;
	background: #666;
	color: #fff;
	content: attr(data-tooltip);
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.2;
}

[data-tooltip]:after {
	border: 8px solid transparent;
	width: 0;
	content: "";
	font-size: 0;
	line-height: 0;
}

[data-tooltip]:hover:before, [data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
}

[data-tooltip].tooltip-top:before {
	bottom: 100%;
	left: 50%;
	margin-bottom: 5px;
	transform: translateX(-50%);
}

[data-tooltip].tooltip-top:after {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top: 8px solid #666;
	border-bottom: none;
}

[data-tooltip].tooltip-top:hover:before, [data-tooltip].tooltip-top:hover:after {
	transform: translateX(-50%) translateY(-5px);
}

styles

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />