How can I position the tooltip to make it responsive?-CodePudding

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 >
        <ul>
            <li><span >Go to Home</span><a href="#">Home</a></li>
            <li><span >Technology Page</span><a href="#">Technology</a></li>
            <li><span >Entertainment Page</span><a href="#">Entertainment</a></li>
            <li><span >Science Page</span><a href="#">Science</a></li>
            <li><span >Sports Page</span><a href="#">Sports</a></li>
            <li><span >About Page</span><a href="#">About</a></li>
            <li><span >Contact Page</span><a href="#">Contact Us</a></li>
        </ul>
    </div>

</body>
</html>

CodePudding user response：

You can use this, the problem was that every tooltip-text was set to be on the top of the page and not of the parent element. I recomend you to use display: flex; to make things responsive.

.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;
    margin: -20px 0 0 0;
    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;
    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;
}

   /* Edited code */

@media screen and (max-width:540px) {
    .navbar li {
        float: none;
    }
    
    .tooltip-text {
        position: absolute;
        display: flex;
        padding: 1px 3px;
        margin-left: 10%;
        text-align: center;
        background-color: #333;
        margin-top: 2vh;
        color: white;
        border: 0.5px solid black;
        border-radius: 2px;
        opacity: 0;
        transition: opacity 1s;
        z-index: 1;
    }
    
    .tooltip-text::after {
        content: "";
        position: absolute;
        transform: rotate(270deg);
        top: 20%;
        margin: 0 0 0 53%;
        border-width: 6px;
        border-style: solid;
        border-color: #222 transparent transparent transparent;
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>whatever</title>
</head>
<body>
    <div >
        <ul>
            <li><span >Go to Home</span><a href="#">Home</a></li>
            <li><span >Technology Page</span><a href="#">Technology</a></li>
            <li><span >Entertainment Page</span><a href="#">Entertainment</a></li>
            <li><span >Science Page</span><a href="#">Science</a></li>
            <li><span >Sports Page</span><a href="#">Sports</a></li>
            <li><span >About Page</span><a href="#">About</a></li>
            <li><span >Contact Page</span><a href="#">Contact Us</a></li>
        </ul>
    </div>

</body>
</html>