Need help tooltip

I want position of tooltip center like bellow

But I can't do that. Anyone help me solution. Thanks !!!
Bellow is mine

<div class="right-menu">
            <button class="tool-tip" data-tooltip="Search">
                <i class="fas fa-search"></i>
            </button>


            <button class="tool-tip" data-tooltip="Cart">
                <i class="fas fa-shopping-cart"></i>
            </button>

            <button class="tool-tip" data-tooltip="My Account">
                <i class="far fa-user"></i>
            </button>

            <button class="tool-tip" data-tooltip="Setting">
                <i class="fas fa-sliders-h"></i>
            </button>

            </div>

-------------------CSS-----------------------


.right-menu button {
   display: inline-block;
   padding: 10px;
   border: 0;
   cursor: pointer;
   position: relative; 
   background-color: transparent;
   text-align: center;
   margin: 0 auto;
   align-items: center;
   justify-content: center;
}

button::before {
    content: attr(data-tooltip);
    background: #ccc;
    position: absolute;
    top: 50px;
    padding: 5px;
    width: 100px;
    border-radius: 10px;
    transition: .5s linear ; 
    visibility: hidden;    
}

button:hover::before {     
   transform: translateY(-80%) ;
   visibility: visible;
}

https://codepen.io/uydung-the-styleful/project/editor/AgoVKe