如何定位工具提示以使其响应？

Question

我正在尝试制作一个工具提示，它应该出现在每个导航栏的顶部 link 并且还应该是响应式的，即当屏幕尺寸小于特定尺寸时 px 说 350px 我的导航栏应该垂直对齐，工具提示应该出现在悬停时每个 link 的左侧或右侧。

我的导航栏在我的页面上完美运行。它也具有应有的响应能力。

问题：但是工具提示不能像它应该的那样在较小的屏幕尺寸下工作。对于所有 link，它显示在 nav div 的顶部，但我希望它在悬停时显示在 link 的左侧或右侧。请帮忙

.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>

Answer 1

你可以使用这个，问题是每个 tooltip-text 都被设置在页面的顶部而不是父元素的顶部。我建议您使用 display: flex; 来使事情响应。

.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 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>

如何定位工具提示以使其响应？

How can I position the tooltip to make it responsive?

html

css

tooltip