Make tooltip appear above everything else?

Current code:

I have this tab and panel menu. Here is an example of the entire thing in a codepen:

The HTML:

<html>
<head></head>
<body>
<div class="warpper">
  <input class="radio" id="one" name="group" type="radio" checked>
  <input class="radio" id="two" name="group" type="radio">
  <input class="radio" id="three" name="group" type="radio">
  <input class="radio" id="four" name="group" type="radio">
  
  <div class="tabs">
  <label class="tab" id="one-tab" for="one"><duck>Panel</duck></label>
  <label class="tab" id="two-tab" for="two"><duck>Panel 2</duck></label>
  <label class="tab" id="three-tab" for="three"><duck>Panel 3</duck></label>
  <label class="tab" id="four-tab" for="four"><duck>Panel 4</duck></label>
  </div>
	
  <div class="panels">
  
  <div class="panel" id="one-panel">
    <div class="panel-title">This is panel 1</div>
    Lorem ipsum dolor sit amet, consectetur <div class="tooltip">Hover over me
    <span class="tooltiptext"><center>Tooltip</center><br> There's lots of text here or it could be an image or a table. It's getting cut off because it's under the "panels".<br><br>The z-index for this feature should be above everything. As you see some of the text from other text with tooltips is invading this box. I'm trying to figure out how to avoid that too.</span>
</div> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>

Sed ut perspiciatis unde omnis iste natus error <div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip</span>
</div> voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </div>
  
  <div class="panel" id="two-panel">
    <div class="panel-title">This is panel 2</div>
    <p>Panel 2 text</p>
  </div>
  
  <div class="panel" id="three-panel">
    <div class="panel-title">This is panel 3</div>
    <p>Panel 3 text</p>
  </div>
  
  <div class="panel" id="four-panel">
    <div class="panel-title">This is panel 4</div>
    <p>Panel 4 text.
  </div>
  
  </div>
  
</div>
</body>
</html>

The CSS:


body{
  background:black;
  font-family: 'Arimo', sans-serif;
  color: #fff;
  overflow: hidden;
}

a {
	text-decoration:none;
}

/* Panel Borders and width */
.panels {
  background:black;
  min-height: 200px;
  height: 50px;
  width: 100%;
  max-width: 800px;
  box-shadow: 3px -15px 46px 1px #213346 inset;
  border-radius: 10px;
  border-top: 2px solid #524824;
  top: -2px;
  border-right: 2px solid #524824;
  border-left: 2px solid #524824;
  border-bottom: 2px solid #524824;
  overflow:hidden;
  padding:20px;  
  position: relative;
  z-index: 1;
}

/* Active tab */
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab,
#three:checked ~ .tabs #three-tab,
#four:checked ~ .tabs #four-tab,
#five:checked ~ .tabs #five-tab,
#six:checked ~ .tabs #six-tab,
#seven:checked ~ .tabs #seven-tab {
  position: relative;
  background-image: linear-gradient(#213346, black);
  color:#FFF;
  border-top: 2px solid #524824;
  border-right: 2px solid #524824;
  border-left: 2px solid #524824;
  border-bottom: 1px solid black;
  border-radius: 5px;
  z-index: 2;
}

/* Inactive Tabs */
.tab{
  cursor: pointer;
  padding:10px 20px;
  margin:0px 2px;
  background-image: linear-gradient(black, #524824);
  display:inline-block;
  color:#ffbe32;
  border-radius:3px 3px 0px 0px;
  box-shadow: 0 0.5rem 0.8rem g; 
  position: relative;
  z-index: 1;
}

duck:hover {
	color: cyan;
	background: #213346;
	background-image: linear-gradient(black, #213346);
}

.tab:hover {
  background-image: linear-gradient(#213346, black);
  color:cyan;
/*  border-top: 1px solid gold;
  border-right: 1px solid gold;
  border-left: 1px solid gold;
  border-bottom: 1px solid black;
  border-radius: 5px;*/
}

/* Panels */
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel,
#three:checked ~ .panels #three-panel,
#four:checked ~ .panels #four-panel,
#five:checked ~ .panels #five-panel,
#six:checked ~ .panels #six-panel,
#seven:checked ~ .panels #seven-panel {
  display:block;
  z-index: auto;
}

/* Header Text */
h2{
  color:#FFF;
  text-align:center;
  font-size:2em;
}

.warpper{
  position: static;
  display:flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.panel{
  display:none;
  animation: fadein .8s;
  overflow-y: scroll; 
  height: 100%;
  z-index: 2;
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}


.panel-title{
  font-size:1.5em;
  font-weight:bold
}


.radio{
  display:none;
  position: static;
  z-index: 1;
}


/* tooltip  */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: none;
  z-index: 1;
  font-size: 24px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  height: 200px;
  background-color: #006600;
  color: #fff;
  text-align: center;
  vertical-align: top;
  border: 3px solid gold;
  border-radius: 6px;
  padding: 15px 0;
  bottom: 500px;
  top: -50px;
  left: 125px;  
  margin-left: -60px;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 2.5s;
  position: absolute;
  z-index: 1;
  font-size: 24px;
}

/* When tooltip appears */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  position: absolute;
  z-index: 10;
  font-size: 16px;
}


/* End tooltip */

I’m trying to include a tooltip that appears when the user hovers over specific text inside the content panel.
An example of the tooltip presents it self when you hover the “Hover over me” text in the codepen.

Expected behavior of code:

Tooltip displays above everything. Absolutely everything.

Current behavior of code:

The tooltip is getting cut off. It’s also allowing the text from other tooltips to invade in to it.

Steps I have taken to diagnose the issue and information those steps revealed:

I’ve tried organizing z-index layers making everything I want below the tooltip popup a lower z-index value and giving the tooltip and it’s text a higher z-index value. I’ve also tried assiging different css position: <value>s.
Result: Nothing I tried caused the result I want. The tooltip either gets cut off or something, somewhere, inside the content panel doesn’t display correctly.

I’ve tried separating the .tooltiptext css class from the .tooltip css class.
Result: Same as above. Nothing I tried worked.

How do I get the tooltip to appear above everything so it doesn’t get cut off and doesn’t allow other content to invade in to it?

hello there, im seeing this visual and it seems z-index is working!! but i also another ‘tooltips’ kind of modal below that, so not sure what you’re trying to do with that!!
image

so my query is have you fixed it already? thanks and happy coding :slight_smile:

1 Like

No, I haven’t fixed it. Your example doesn’t include the tabs menu I’m using. Please see the codepen or use all of the code I included.

i can see you have two ‘modal’ and both of them have ‘z-index’ in it, where exactly do you want to see these modal, "hover me text / when page tabs is hovered’?! im not sure i understand what you’re trying to do :frowning:

please clarify, thanks…

I don’t understand what you mean by “modal”.

Modal is a semi-synthetic fibre that has found fame in the age of activewear. Breathable and absorbent, this cotton alternative is used to manufacture underwear, pyjamas, bathrobes, bed sheets, and more.

What I’m trying to do doesn’t have anything to do with fabric. I’m working with a ToolTip.

The result I’m trying to produce is that when a person hovers over the large text “Hover over me” the tooltip appears on top of everything else on the page. It’s currently not doing that. The tooltip is getting cut off because it’s under the panel border.

Do you not see that the tooltip is getting cut off in the codepen I included?
That’s the issue I’m trying to resolve.

:grinning:
i never knew modal could mean that, anyways, im referring to your ‘tooltip block’, for a better grasp, you might want to look at this ‘How To Make a Modal Box With CSS and JavaScript

and about your tooltips height, there are few things that you can do about it, ‘you can increase its size or you can use overflow on it’ would that be useful to your requirement here? mind you ‘overflow’ will cause your tooltips to initiate ‘scroll’, there are ways that you can mitigate about it’s presence, you might want to look at overflow - CSS: Cascading Style Sheets | MDN

hope this helps, happy coding :slight_smile:

Thanks for the suggestions! Scrollbas won’t work, the tooltip would still be getting cut off. That’s ugly and looks like bad errors the designer didn’t bother fixing. I’ll look in to that other thing.

Modal is not what they are as that word is defined. Darned them at w3school! :stuck_out_tongue:
No wonder I didn’t find that. Thanks for linking!

I’ve tested the suggestion out for the past 2 hours. It’s not the solution. It has the same exact problem my original design and code has.

Edit: Maybe I can still work with this. Changing the z-index of it worked, on this one. I’d still like to learn and know why z-index isn’t working as it seems it should in my examples. Did I place it in the wrong place? Did I typo somewhere?

well, higher z-index has higher preference in stacking, so there’s that

also, why dont you make your tooltip larger to contain all those texts!!

The script you shared is cool. However it only seems to allow using it once. There’s going to be hundreds of things I’ll have tooltips on in the final project page.

Testing it locally it only works on one of the links I make a button even if I copy the same test <div></div> like this:

<!-- First Container-->
<div>
<!-- Trigger/Open The tooltip -->
<button id="myBtn" class="button">Test</button>

<!-- The tooltip -->
<div id="mytooltip" class="tooltip">

  <!-- tooltip content -->
  <div class="tooltip-content">
    <span class="close">&times;</span>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/IG38nV_uyjI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

</div>
</div>
<!--Close First Container-->
<br><br>
<!--Second Container-->
<div>
<!-- Trigger/Open The tooltip -->
<button id="myBtn" class="button">Test</button>

<!-- The tooltip -->
<div id="mytooltip" class="tooltip">

  <!-- tooltip content -->
  <div class="tooltip-content">
    <span class="close">&times;</span>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/IG38nV_uyjI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

</div>
</div>
<!-- End Second Container-->

Only the first one works. The second one does not. I need to make hundreds of these on the same page.

consider this, if you like, have a function which will create this modal / tooltips for you then you dont have to add so much ‘html’ for each of them, if that makes sense!!

and keep your tooltips ‘container height auto’ so that no matter how large or small it gets it wont overflow from container

happy coding :slight_smile:

I plan on using an embed trick to embed the tooltips, once I get past this issue. auto height and width didn’t do it. Removing the tooltip’s borders and background solved the sizing issue(s).

I’m getting closer. I’ve updated the original codepen in the initial post of this thread. Now the only thing above the tooltip is the tabs. I’m working on figuring out how to keep the active tab above the panel border but below the tooltip.

The confusion and hurdle to get over now is the active tab’s z-index is 2 so it looks like the tab and it’s panel is one item. The tooltip’s z-index is higher than the tab right now but it’s still below the active tab because the panel the tooltip link is in is below the active tab.

I’m trying to figure out how I create the effect of the active tab and panel being one item on the same z-index so the tooltip is above them both.

I’ll get it eventually. I’ve been at this one thing for 3 days now. Help getting this part completed would be much appreciated.

That “modal” (wrong word for it) thing has the same issue and will cause me to re-do the overwhelmingly many tooltips I already have in the project’s files. That’s why I’m trying to adjust the css. I’m trying to avoid having to change and re-do 3 months worth of work just to layer the tooltip.

If I get the css layering right it’s a lot less work than changing how I’m making the tool tip appear for thousands of tooltips. I’d rather have to redo the tabs menu and panels than redo thousands of tooltips.

I got it working by using position: fixed; on the class element CSS that unhides the tooltip when the target element is hovered. I gave the fixed positioning top and left position values so the to the tooltip box avoids the tabs. They can’t be under them if they’re not near them :).

I corrected the z-index attributes by giving the tooltip z-index;3; the active tab z-index: 2; and every other element z-index:1;.

I also gave the tooltiptext a custom tiptext class when it’s being hovered over so it wasn’t invading the tooltip when it was active.