'How can I position the tooltip to make it responsive?

I'm trying to make a tooltip that should appear on the top of every navigation bar link and should also be responsive i.e when screen size is smaller than certain px say 350px my navbar should appear vertically align and tooltip should appear on the left or right side of every link on hover.

My navigation bar works perfectly on my Page. It's also responsive as it should be.

PROBLEM: But tooltip is not working in smaller screen size as it should be. It shows on the top of nav div for all link but I want it to left or right side of the links on hover. Please help 

.navbar ul{
    margin: 0;padding: 0;
    list-style-type: none;
    background-color: #333;
    overflow: hidden;
}
.navbar li {
    float: left;
    text-align: center;
}
.navbar li a, .dropbtn{
    display: inline-block;
    text-align: center;
    color: white;
    font-size:larger;
    padding: 12px 17px;
    text-decoration: none;
}
.navbar li a:hover {
    background-color: rgb(90, 81, 81);
    text-decoration: underline;
}

/*
.navbar .dropdown{
    display: inline-block;
}*/


/*tooltip CSS*/
.tooltip-text{
    position: absolute;
    display: inline-block;
    padding: 1px 3px;
    margin-left: -7px;
    top: -20px;
    text-align: center;
    background-color: #333;
    color: white;
    border: 0.5px solid black;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 1s;
    z-index: 1;
}

.tooltip-text::after{
    content: "";
    position: absolute;
    top: 100%;margin-left: -5px;
    left: 50%;
    border-width: 6px;
    border-style: solid;
    border-color: #222 transparent transparent transparent;
}

.navbar li:hover .tooltip-text{
    visibility: visible;
    opacity: 1;
}

@media screen and (max-width:540px) {
    .navbar li {
        float: none;
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>whatever</title>
</head>
<body>
    <div class="navbar">
        <ul>
            <li><span class="tooltip-text">Go to Home</span><a href="#">Home</a></li>
            <li><span class="tooltip-text">Technology Page</span><a href="#">Technology</a></li>
            <li><span class="tooltip-text">Entertainment Page</span><a href="#">Entertainment</a></li>
            <li><span class="tooltip-text">Science Page</span><a href="#">Science</a></li>
            <li><span class="tooltip-text">Sports Page</span><a href="#">Sports</a></li>
            <li><span class="tooltip-text">About Page</span><a href="#">About</a></li>
            <li><span class="tooltip-text">Contact Page</span><a href="#">Contact Us</a></li>
        </ul>
    </div>

</body>
</html>
htmlcsstooltip


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions