1

I am creating my portfolio site from Weebly. I want to add tag like elements with tooltips when hovering so I start exploring with custom HTML and CSS and follow tutorial from w3schools. I realized the tooltips are not on top;
I have read the description and understand the CSS properties and attributes. I have tried to add a z-index that is larger than all other existing elements. However, even a ridiculously large z-index is the same. I have attached the result, the custom HTML, and CSS I wrote in Weebly editor; 

.ToolTip {
  position: relative;
  display: inline-block;
  z-index: 2;/* //Largest index I could find in the theme is 6.*/
  /*//For Testing*/
  height: 100px;
  top: 30px;
}

.ToolTip .ToolTipText {
  background: #F7ADA2; //Color for ToolTip - F7ADA2, 5A3857, D6345D, DD9B70, E7D7C2, A68A80, 725752
  visibility: hidden;
  display: inline-block;
  text-align: center;
  border-radius: 0.6em;
  box-shadow: 0px 0px 0.2em 0.1em rgba(0.35,0.22,0.34, 0.1);
  
  margin-left: -0.3em;
  padding: 0.4em 1.2em;
  /*//set position of ToolTip box*/
  position: absolute;
  bottom: 6.8em;
  opacity: 0;
  transition: opacity 0.3s;
}

.ToolTip .ToolTipText::after {
  content: "";
  position: absolute;
  bottom: -0.6em;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #F7ADA2 transparent transparent transparent;
}

.ToolTip:hover .ToolTipText {
  visibility: visible;
  z-index: 1000000000; /*//Try to plug a really high index*/
  opacity: 1;
}
<div class="LinkTagWrapper">
  <div class="ToolTip">
    <span class="ToolTipText">
      testing abc
    </span>
    <a class="LinkTag" href="">
      <div class="LinkTagGroup">
        <div class="LinkTagImage"> 
          xx
        </div>
        <span class="LinkTagDes">
          Berd
        </span>
      </div>
    </a>
  </div>
</div>

I expect the code can force the tooltips div to the top of everything. The space on the side and above seem to be still on top of it;

Published outcome of Tooltips when hover

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
L_L
  • 11
  • 1
  • "z-index: 2; //Largest index I could find in the theme is 6." I suppose you tried to set a higher z-index already? – Wimanicesir May 16 '19 at 14:27
  • Looks like there is container with `overflow: hidden`. – 3rdthemagical May 16 '19 at 14:29
  • I edited your code into a working snippet and fixed comment syntax . It works. If your style sheet are plain CSS, then you should write CSS comments this way : `/* CSS coment */`. Unless your are using a preprocessor , there is no other syntaxe.Also, make sure the tooltip stands inside an area that you can see. overflow:hidden on parent or window's top won't allow to see it or only partially – G-Cyrillus May 16 '19 at 14:43
  • 1
    z-index works for positioned elements in the same stacking context (usually siblings) so if your elements are in different stacking contexts, then you cannot move your tooltip on top - [more information about the stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) – Pete May 16 '19 at 14:54

1 Answers1

0

Looks like an overflow issue, however it's hard to tell without seeing all the code for the site/page. Basically, the custom html element has an overflow styled into the html of the element,.. and that will cause it.

Try adding padding above your BERD/BERDDD 'buttons' or the LinkTagWrapper itself; 

.LinkTagWrapper {
    padding: 30px 0 0 0;
}
Jeffrey Kastner
  • 651
  • 6
  • 15