Question

我必须创建一个图标导航栏，该导航栏的顶部带有webfont-icons，该图块分为3个部分：

左上：图标在左侧对齐
中间居中：图标在网站中间对齐
右上方：图标在右侧对齐

这部分我要工作。使用以下HTML ...

<div id="topNavigation">
  <div id="topNavigationLeft">
    <div class="iconButton makeAnIcon" data-icon="&#128584;"><span class="tooltiptext">The funky monkey</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128526;"><span class="tooltiptext">The cool smiley</span></div>
  </div>
  <div id="topNavigationMiddle">
    <div class="iconButton makeAnIcon" data-icon="&#128697;"><span class="tooltiptext">Man rest room</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128698;"><span class="tooltiptext">Woman rest room</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128702;"><span class="tooltiptext">Water Closet</span></div>
  </div>
  <div id="topNavigationRight">
    <div class="iconButton makeAnIcon" data-icon="&#128699;"><span class="tooltiptext">Mixed up rest room</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128700;"><span class="tooltiptext">Baby room</span></div>
    <div class="iconButton makeAnIcon" data-icon="&#128701;"><span class="tooltiptext">Toilet</span></div>
  </div>
</div>

这是我使用过的CSS：

.iconButton {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

.iconButton:hover {
    color: #ff0000;
}

.iconButton .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.iconButton:hover .tooltiptext {
    visibility: visible;
}

.makeAnIcon:before
{
    font-family: 'Arial';
    content: attr(data-icon);
    font-size:60px;
}

#topNavigation {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;   

    position: absolute;
    width: 100%;
    height: 80px;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid;
}

#topNavigationLeft {  
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: 100%;

    /* Debug Color */
    /* background-color: rgba(255, 0, 0, 0.2); */
}

#topNavigationMiddle {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    height: 100%;

    /* Debug Color */
    /* background-color: #711e82; */
}

#topNavigationRight {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    height: 100%;

    /* Debug Color */
    /* background-color: rgba(255, 0, 0, 0.2); */
}

看我的小提琴：https://jsfiddle.net/schludi/yrgaf6p9/

现在，我必须在悬停图标下方显示文本。

我的问题是，它位于我使用过的flex容器下，并且不会影响将在“ topnavigation” -div下添加的其他元素。

当我在右上角时，“文本”应该显示为与图标左对齐，因为span元素太大，因此不会生成滚动条。我该怎么办？

Answer 1

首先，对于工具提示，我强烈建议使用插件。您将遇到工具提示在屏幕上消失的问题（x或y），而CSS根本无法检测到。

但是，让我们回答您的问题。因此，如果您的div出现在另一个元素的下面，那么有一个不错的CSS属性可以为您解决这个问题！我看你已经用过了。您可以做的是将 z-index 添加到所需的元素上。索引越高，该元素在视觉上就越高。

.iconButton .tooltiptext {
    display:none;
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 9999; /* This is extreme, don't always default to 9999 */
}

只需确保要放在顶部的元素的z-index高于其他元素。如果它仍然不在顶部，则其父级可能比您想要在顶部的其他元素低，因此在flex容器中，请确保z-index低于.tooltiptext

的父级。

Answer 2

对于您的特定情况，以下内容将使最后的工具提示保持在页面范围之内。但是，它不是很动态。

#topNavigationRight .iconButton:last-of-type .tooltiptext {
    right: 0;
}

显示在div容器下悬停div时显示文本

2 个答案: