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

【问题标题】：How can I position the tooltip to make it responsive?如何定位工具提示以使其响应？
【发布时间】：2022-02-12 14:03:46
【问题描述】：

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

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

问题：但是工具提示不能在较小的屏幕尺寸下正常工作。它显示在所有链接的nav div 顶部，但我希望它在悬停时位于链接的左侧或右侧。请帮忙

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

【问题讨论】：

标签： html css tooltip

【解决方案1】：

你可以使用这个，问题是每个工具提示文本都设置在页面顶部而不是父元素的顶部。我建议你使用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>

【讨论】：

它工作...感谢您的帮助。
你还说应该在父元素上设置工具提示文本，所以你能解释一下我应该如何以及应该做些什么来实现它。
@Kusan2030 好吧，当您使用 top 属性时，您将所有拥有它的元素定位在页面顶部，如果您的父元素（容器）有bottom: 0; 。因此，您应该使用margin，而不是使用top，它根据父元素的位置定位元素。