Nav Menu Show a tooltip text on hover

To make a tooltip text on hover a nav item, like this

You can use this code to Website Tools > Custom CSS box.

div.header-nav-item>a {
    position: relative;
}
div.header-nav-item>a:hover:before{
    opacity: 1 !important;
}
/* item 1 */
div.header-nav-item:nth-child(1)>a:before {
    content: "Google Google";
    position: absolute;
    top:  -20px;
    right: -50px;
    background-color: rgba(0,0,0,0.75);
    border-radius: 5px;
    color: #fff;
    padding: 2px 5px;
    opacity: 0;
}
/* item 2 */
div.header-nav-item:nth-child(2)>a:before {
    content: "Squarespace Squarespace";
    position: absolute;
    top:  -20px;
    right: -50px;
    background-color: rgba(0,0,0,0.75);
    border-radius: 5px;
    color: #fff;
    padding: 2px 5px;
    opacity: 0;
}
/* Item 3 */
div.header-nav-item:nth-child(3)>a:before {
    content: "Facebook Facebook";
    position: absolute;
    top:  -20px;
    right: -50px;
    background-color: rgba(0,0,0,0.75);
    border-radius: 5px;
    color: #fff;
    padding: 2px 5px;
    opacity: 0;
}
/* item 4 */
div.header-nav-item:nth-child(4)>a:before {
    content: "Google AI";
    position: absolute;
    top:  -20px;
    right: -50px;
    background-color: rgba(0,0,0,0.75);
    border-radius: 5px;
    color: #fff;
    padding: 2px 5px;
    opacity: 0;
}