Tooltip z-index hidden behind another element

I've encountered an issue where tooltips on adjacent elements are being obscured by headers of subsequent elements. I've attempted adjusting the z-index, but it hasn't resolved the problem - the root cause eludes me.

.header {
  vertical-align: bottom;
}

.rotated-header .tooltip-text {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 10;
  opacity: 0;
  transform:rotate(45deg);
  transform-origin: left;
  width:25em;
  white-space: normal;
}

.rotated-header .tooltip-text::after {
  content: "";
  position: absolute;
  border-style: solid;
  z-index: 11;
}

.rotated-header:hover .tooltip-text {
  visibility: visible;
  position: absolute;
  opacity: 1;
  z-index: 10;
}

.schedule-header-tooltip {
  white-space: nowrap;
  pointer-events: auto;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.rotated-header {
  width:30px;
  height:100px;
  position:relative;
  transform: 
    translate(1em, -1em)
    rotate(315deg);
  transform-origin:bottom;
  pointer-events: none;
}

.tableFixHead {
  overflow: auto;
  height: 150px;
}

.tableFixHead thead tr { 
  position: sticky;
  top: -2em;
  background: white;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr>
        <th class="header">Asset</th>
        <th class="header">
          <div class="rotated-header">
            <div class="schedule-header-tooltip">
              <span>Rotated row 1</span>
            </div>
            <div class="tooltip-text">
              <span>Name</span>Something extremely long and unwieldy
              <span>Date</span>
              <span>Age</span>
            </div>
          </div>
        </th>
        <th class="header">
          <div class="rotated-header">
            <div class="schedule-header-tooltip">
              <span>Rotated row 1</span>
            </div>
            <div class="tooltip-text">
              <span>Name:</span> Something extremely long and unwieldy
              <span>Date</span>
              <span>Age</span>            
            </div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
      <tr>
        <td>some</td>
        <td>some</td>
        <td>some</td>
      </tr>
    </tbody>
  </table>
</div>

Perhaps there's a more effective way to implement these tooltips...

htmlcssangularhtml-tabletooltip

Answer №1

Understanding stacking context is crucial in CSS. Every time a certain action occurs, such as setting a z-index on a relative position or using transforms, a new stacking context is created. This can lead to unexpected behavior when elements are positioned within different stacking contexts. To resolve this issue, consider repositioning the tooltip element as a sibling so that it's within the same stacking context.

To illustrate this concept, here's a simplified version of the code snippet:

table {
  margin-top: 100px;
}

th {
  position: relative;
}

.tooltip-text {
  display: none;
  position: absolute;
  top: -10%;
  background-color: red;
  color: white;
  z-index: 100;
  width: 200px;
}

.rotated-header:hover+.tooltip-text {
  display: block;
}

.rotated-header {
  transform: rotate(-45deg);
  transform-origin: bottom left;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr class="header">
        <th>Asset</th>
        <th>
          <div class="rotated-header">
            Rotated row 1
          </div>
          <div class="tooltip-text">
            <span>Name:</span> Example Tooltip Content
          </div>
        </th>
        <th>
          <div class="rotated-header">
            Rotated row 2
          </div>
          <div class="tooltip-text">
            <span>Name:</span> Another Tooltip Content
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>data</td>
      </tr>
      <tr>
        <td>example</td>
      </tr>
    </tbody>
  </table>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement backup style attributes for a React JS component?

Is there a method to implement fallback style properties for a component? For example: var inlineStyle = { display: '-webkit-box', display: '-webkit-flex', display: '-moz-box', display: '-moz-flex', ...

javascriptcssreactjs

When the target event occurs on a div element, update the style of a different

Currently, I am working on creating a responsive mobile-first navigation system and exploring progressive enhancement techniques. The objective is to target the #header element by clicking a menu icon, which will then adjust the height of the #menu to 100 ...

htmlcss

When the table is clicked, a dynamic accordion table should appear

My current code displays a table inside another table using a PHP for loop. While I can retrieve the data successfully, I'm facing issues with the UI layout and accordion functionality. The inner table is displaying beside the outer table instead of b ...

javascriptphphtmlhtml-tableaccordion

Uncovering specific content within an html document with the help of BeautifulSoup

I am currently working with a code that involves using BeautifulSoup to scrape text from elements with the class 'product'. However, I am only interested in extracting the 2nd and 4th values ('Product 2' and 'Product 4') to be ...

pythonhtmlbeautifulsoup

Improving Efficiency in Angular2: Minimize HTTP Requests

Currently, I am utilizing Angular2 RC5 alongside an ASP.NET Core server to handle API calls for data retrieval. My main concern revolves around the number of HTTP calls being made within Angular2 components. I fear that if I continue on this path, the volu ...

performanceangularangular2-http

Problem Encountered with Jquery Validation for Name Field (Restriction to Alphabetic

I am struggling to validate a name format using a predefined jQuery validation tool. My intention is for the name field to accept only characters, but even with the correct regex pattern, it still allows numbers to be entered. The specific script I am us ...

javascriptjqueryhtmlregexvalidation

Nested Divs in CSS

I'm really struggling to get a div to display under another div in the way they usually do. Currently, I am using MaterializeCSS for my layout setup: <div class="container valign-wrapper"> <div class="customClass"></div> &l ...

cssmaterial-designflexboxmaterialize

How can I keep the cursor from automatically moving to the beginning of an input field when the type changes?

Currently in the process of creating a Password field that allows users to hide or display their password in React/Ionic. I am aiming to maintain focus on the password field when switching the input type, similar to how it is done on the PayPal Login page ...

javascripthtmlcssreactjsforms

Centering text underneath bootstrap image design

After trying various methods, I still couldn't get the text to display directly below my images in the center. Below is the code I attempted: <div class="our_partners"> <div class="container"> <div class="row"> ...

htmlcsstwitter-bootstrap

Angular tabs display the initial tab

I attempted to implement the Tabs feature from angular material by following the provided documentation. However, I encountered an issue where the first tab does not display upon page load; I have to manually click on it to view its content. For more info ...

angulartypescriptangular-material

Disable blur effect on child element with relative positioning

Is there a way to create a background blur effect using material cards without affecting a specific div? <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/ ...

htmlcssmaterial-design

Having issues with Bootstrap loading on the website

I've successfully downloaded Bootstrap and added it to my angular.json file and head tag. However, I'm facing an issue where it only loads on the home page or when I refresh the page. But, I actually need it to load when navigating to the product ...

angularbootstrap-5angular18

The scrolling on IE9 is fragmented and uneven

I am in need of creating a specific layout that consists of a fixed header bar at the top, which will house various controls. Below this header bar, there should be a large scrollable SVG area where I can place different SVG elements. This area must includ ...

javascripthtmlcss

Establishing connection between a MEAN stack application and MongoDB hosted on AWS

I am currently developing a MEAN stack application. MongoDB is operational on AWS, and I have successfully connected to it using Robo 3T. While attempting to code the connection in my express angular application, I keep encountering a connection timeout e ...

angularmongodbamazon-web-servicesexpressmean-stack

Is it possible to update the Backend IP address after setting up the Angular Frontend and hosting it with nginx?

Our project involves utilizing an Intel NUC with Ubuntu 18.04 for a WebInterface. The backend is up and running on the device, connecting to the frontend through a WebSocket. The front end is powered by Angular and hosted using nginx. However, we've e ...

angularnginxfrontendbackendubuntu-18.04

Does the padding and margin of an element alter when the position is set to relative?

By utilizing relative positioning, an element can be moved in relation to its original position in normal flow. - Citation from the book "HTML&CSS: design and build websites" by John Duckett If an element has a relative position property, it opens up ...

csscss-positionmarginpadding

Each time the page refreshes, the list will rotate

Imagine having a website where three rows of information are loaded, but you only want one random row to load each time the page is refreshed. What would be the most efficient code to achieve this unique loading pattern? ...

phphtml

Creating horizontal cards with Angular MaterialWould you like to learn how to design

I need help converting these vertical cards into horizontal cards. Currently, I am utilizing the Angular Material Cards component. While I can successfully create cards in a vertical layout, my goal is to arrange them horizontally. Below is the code sni ...

htmlcssangularangular-material

Tips for executing a loop and fetching a URL in Angular 8

I've been attempting to fetch data from a URL and convert it into a JSON file for display using HTML. The URL of the JSON only differs by one digit, ranging from 1 to 10, "https://jsonplaceholder.typicode.com/todos/1" Despite my efforts to create a l ...

jsonangularurl

Is there a way to obtain an array after subscribing to an RxJS method?

I am struggling with the following code snippet: Rx.Observable.from([1,2,3,4,5,6]) .subscribe(x=>console.log(x)); Is there a way to modify this code so that instead of iterating through the array elements from the .from() method, I can return the enti ...

javascriptangularrxjs