Show text on hovering a div under a flex-container - html

Question

I have to create an icon navigation bar with webfont-icons on the top of the page, that is tiled 3 Sections:
upper-left: Icons are aligning on the left side
middle-center: Icons are aligning in the middle of the site
upper right: Icons are aligning on the right side
This part i got to work. With the following HTML ...
<div id="topNavigation">
<div id="topNavigationLeft">
<div class="iconButton makeAnIcon" data-icon="🙈"><span class="tooltiptext">The funky monkey</span></div>
<div class="iconButton makeAnIcon" data-icon="😎"><span class="tooltiptext">The cool smiley</span></div>
</div>
<div id="topNavigationMiddle">
<div class="iconButton makeAnIcon" data-icon="🚹"><span class="tooltiptext">Man rest room</span></div>
<div class="iconButton makeAnIcon" data-icon="🚺"><span class="tooltiptext">Woman rest room</span></div>
<div class="iconButton makeAnIcon" data-icon="🚾"><span class="tooltiptext">Water Closet</span></div>
</div>
<div id="topNavigationRight">
<div class="iconButton makeAnIcon" data-icon="🚻"><span class="tooltiptext">Mixed up rest room</span></div>
<div class="iconButton makeAnIcon" data-icon="🚼"><span class="tooltiptext">Baby room</span></div>
<div class="iconButton makeAnIcon" data-icon="🚽"><span class="tooltiptext">Toilet</span></div>
</div>
</div>
This is the CSS i had used:
.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); */
}
See my fiddle: https://jsfiddle.net/schludi/yrgaf6p9/
Now i have to show a text UNDER the Icons on hover.
My problem is, that it is under the flex-container i have used and it should not affect further elements that will be added under the "topnavigation"-div.
When i am on the upper right side, the Text should appear left-aligned to the icon, that no scroll bars will be generated because the span element is too big. How can i do this?

Answer 1

First off, for ToolTips i would highly recommend using a plugin. You'll run into issues where the tooltip goes off the screen (either x or y) and you can't detect that at all with CSS.
However, lets answer your question.
So if you've got a div that's appearing underneath another element, there's one nice css property that will solve this for you! I see you've already used it. What you can do is add z-index to your element that you want on top. The higher the index, the higher the element will be visually.
.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 */
}
Just make sure the z-index of the element you want on top is higher than the other elements. If it's still not on top, then the chances are the parent is lower than the other element that you want on top, so on your flex-container make sure that the z-index is lower than the parent of .tooltiptext

Answer 2

For your specific case, the following would keep the last tooltip within the bounds of the page. It's not very dynamic, though.
#topNavigationRight .iconButton:last-of-type .tooltiptext {
right: 0;
}