<div class="padre">
	<p>Esto es un tooltip:</p>	
	<div class="tooltip-detail tooltip1">
		<a class="card-name__tooltip">
			<i class="fas fa-info-circle"></i>
		</a>
		<div class="tooltip-detail__tooltip-content tool1">
			<div class="d-flex justify-content-between align-items-center">
				<div class="tooltip-text">
					<p><strong>Tu mail corporativo será clave para el ingreso a la charla.</strong> <br> Esta invitación es personal e intransferible.</p>
				</div>
			</div>
		</div>
	</div>
</div>

body {
	font-family: sans-serif;
	background-color: #ecf0f1;
		text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
$white: #fff;
$primary-im: #27313c;

.padre {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400px;
}

.tooltip-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
		margin-left: 10px;
		position:relative;

    &__tooltip-content {
        box-shadow: 0 2px 34px -12px #768692;
        background-color: #0033a0;
        padding: 15px 20px;
        position: absolute;
        width: auto;
        min-width: 225px;
        border-radius: 5px;
        bottom: 40px;
        display: none;
        z-index: 2;

        .tooltip-text {
            color: $white;

            p {
                font-size: 14px;
                line-height: 1.2;
                text-transform: initial;
                margin: 0;
            }
        }

        &::before {
            background-color: #0033a0;
            content: "";
            position: absolute;
            bottom: -4px;
            right: 0;
            left: 0;
            height: 9px;
            width: 9px;
            transform: rotate(135deg);
            border-left: 0;
            border-bottom: 0;
            transition: ease .3s;
            pointer-events: none;
            margin: auto;
        }
    }

    i {
        font-size: 15px;
				color: #00aec7;
    }
}
View Compiled
$(document).ready(function () {
	hideTooltip('.tooltip1', '.tool1', '45px', '40px');
});


function hideTooltip(id, idelement, bottom1, bottom2) {
    var item = $(id);
    var tooltip = $(idelement);

    item.hover(function (e) {
        e.preventDefault();
        tooltip.stop(true, true).fadeIn({
            queue: false,
            duration: 200
        });
        tooltip.animate({
            bottom: bottom1
        }, 200);
    }, function (e) {
        e.preventDefault();
        tooltip.stop(true, true).fadeOut({
            queue: false,
            duration: 200
        });
        tooltip.animate({
            bottom: bottom2
        }, 200);
    });
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js