.my-tooltip{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.my-tooltip-trigger{
    position:relative;
    display:inline-flex;
    cursor:pointer;
    height: 25px;
}

.my-tooltip-box{
    position:absolute;
    bottom:calc(100% + 15px);
    left:50%;
    transform:translateX(-50%);

    width:350px;

    padding:18px;

    background:#fff;
    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;

    transition:all .3s ease;

    z-index:999;
}

/*.my-tooltip-trigger:hover .my-tooltip-box{
    opacity:1;
    visibility:visible;
}*/

.my-tooltip-box:after{
    content:"";

    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);

    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:10px solid #fff;
}