"Error: Tooltip z-index is not properly displayed and is hidden beneath

Currently, I am facing an issue with a tooltip displaying when hovering over navigation elements. The problem is that while the tool tip appears over the element being hovered on, it displays underneath all other elements as well. (To clarify, imagine a nav bar where the tool tip of link 1 has the text of link 2 overlapping it, making it unreadable). I have attempted to adjust the z-index of different elements and also tried using the standard Bootstrap method of "data-toggle='tooltip'." However, this approach doesn't seem to render the HTML properly even when utilizing Razor @Html.Raw().

<li class="nav-item tooltip">
<a class="nav-link active" href="#"><i class="fal fa-file-alt"></i>  <span>INVOICES</span></a>
<span class="tooltiptext" data-placement="top">@Html.Raw(UIMessages.TTSignUp)</span>
</li>

<li class="nav-item tooltip">
<a class="nav-link active" href="#"><i class="fal fa-pound-sign"></i><span>EXPENSES</span></a>
<span class="tooltiptext">@Html.Raw(UIMessages.TTSignUp)</span>
</li>

<li class="nav-item tooltip">
<a class="nav-link active" data-toggle="tooltip" title="@Html.Raw(UIMessages.TTSignUp)" href="#"><i class="fal fa-pound-sign"></i><span>PENSION</span></a>
<span class="tooltiptext">@Html.Raw(UIMessages.TTSignUp)</span>
</li>

My CSS/SCSS...

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1 !important;


}


.toptip span {
    z-index: 9999999;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: $TrigDarkBlue;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
    /* Position the tooltip */
    position: absolute;

    top: -5px;
    left: 5%;

    a {
        color: $TrigBlue;
    }
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    z-index: 99999;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent $TrigDarkBlue transparent transparent;
    z-index: 9999
}

I initially believed that adjusting the z-index of '.tooltiptext' would solve the issue, but apparently it's not that straightforward. Any assistance on this matter would be highly appreciated.

Cheers

htmlcssbootstrap-4tooltip

Answer №1

Check out the code snippet below where I added a style rule bottom: -38px; to the .tooltip .tooltiptext class:

    .tooltip {
    position: relative;
    display: inline-block;
    opacity: 1 !important;


}


.toptip span {
    z-index: 9999999;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
    position: absolute;
    bottom: -38px;
    left: 0;

    a {
        color: $TrigBlue;
    }
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    z-index: 99999;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent $TrigDarkBlue transparent transparent;
    z-index: 9999
}
        <li class="nav-item tooltip">
                <a class="nav-link active" href="#"><i class="fal fa-file-alt"></i>  <span>INVOICES</span></a>
                <span class="tooltiptext" data-placement="top">@Html.Raw(UIMessages.TTSignUp)</span>
                </li>
                
                <li class="nav-item tooltip">
                <a class="nav-link active" href="#"><i class="fal fa-pound-sign"></i><span>EXPENSES</span></a>
                <span class="tooltiptext">@Html.Raw(UIMessages.TTSignUp)</span>
                </li>
                
                <li class="nav-item tooltip">
                <a class="nav-link active" data-toggle="tooltip" title="@Html.Raw(UIMessages.TTSignUp)" href="#"><i class="fal fa-pound-sign"></i><span>PENSION</span></a>
                <span class="tooltiptext">@Html.Raw(UIMessages.TTSignUp)</span>
                </li>

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

Expand a section of the background picture

I am working with an image that contains multiple flag images: https://i.stack.imgur.com/xg0iM.jpg I have a div element with the dimensions: width:100px; height:50px. My goal is to resize each flag to fit inside it: .flag{ wi ...

htmlcss

What is the method for setting a default value for a disabled input?

<input type="checkbox" disabled="disabled" checked="checked" name="is_ok" id="id_is_ok"/> Is there a way to set a default value for this disabled input? I've noticed that if this field is disabled and I make edits to my data, the changes are n ...

javascripthtml

The issue occurs when using z-index: -1 in Google Chrome causes links to malfunction

Recently, I encountered an issue with Chrome. When I applied a z-index of -1 to a position: relative; unordered list, the links within it became unclickable. You can see an example at http://jsfiddle.net/raLnx/ using Chrome 20.0.1132.47m. There is no pro ...

htmlcss

The addition and deletion of classes can sometimes lead to disruptions in the DOM

I've been struggling to phrase this question for a while now. I'm working on a single-page e-commerce site that operates by modifying the HTML in divs and using CSS along with JQuery to show and hide those divs. My problem arises when, occasional ...

javascriptjqueryhtmlcssdom

Creating a grid with a dynamic zigzag layout using Bootstrap

I need help accomplishing the following layout: On large screens: First row: an image with text beside it Second row: text with an image beside it Third row: an image with text beside it On small screens: First row: text with an image below it Secon ...

bootstrap-4

Combining verification with Recaptcha (or necessary information)

I'm looking to customize a form below by setting certain fields as required based on different conditions. I would like the Name and Email fields to be mandatory, with a popup alert if they are left empty: Name Email If the "Phone" checkbox i ...

phphtmlformsrecaptcharequired

Managing Events in PHP

As a .net developer working on a php site for a friend, I've been making good progress. However, I have a question - is there something similar to a textchanged event in php? Here's what I'm trying to achieve: I want to dynamically populate ...

phphtml

Is there a transparent space in a PNG image that covers the the anchors located beneath

I've been working on this design which you can see at My plan is to incorporate various animations and transitions, so I have inserted each layer separately (the island, individual clouds, buttons) as images. Unfortunately, I haven't been able t ...

htmlcss

Can Ajax, jQuery, or JavaScript be utilized to create a dropdown menu that automatically navigates to a specific section on the webpage?

I have been exploring this issue here, but I am unable to find any relevant information. Imagine I have a list that starts with <h2> tags: <h2>ITEM 1</h2> CONTENT ______________________ <h2>ITEM 2</h2> CONTENT ____________ ...

javascriptjqueryhtmlajax

Transitioning images while hovering over a different element

Need some inspiration for a school project? I'm stuck on how to create a smooth image fade effect in CSS when hovering over another element (like an anchor link) on the same page. I've been attempting to use the :target and not(:target) selector ...

htmlcss

Tips for redirecting a HTML page to two different pages by utilizing two separate buttons:

To link to another HTML page, you can use the code below triggered by a button click: <form action="where-you-want-to-go"><input type="submit"></form> However, I am encountering an issue. How can I direct two different buttons on the sa ...

htmlhttp-redirectbuttonclick

How to horizontally center an element using HTML and CSS

I am encountering an issue while trying to create a navigation bar or header. The problem lies in centering an h1 element. Here is the HTML code I am using: body { margin: 0; padding: 0; } header { display: flex; justify-content: space-between; ...

htmlcssheadernavbar

Adjust the position of an image in both the x and y axes based on the mouse hover location using jQuery

I am attempting to develop a unique interactive experience where an image placed within a container extends beyond its boundaries. The concept involves moving the image in the opposite direction of my mouse as I hover over the container. The speed and inte ...

jquerycssjquery-pluginshover

Automate Chrome browser to continuously refresh until desired item is located using Selenium and Chromedriver

I am attempting to create a Python script using selenium that will continuously refresh the current Chrome page until a specific item, identified by driver.find_element_by_partial_link_text("Schott"), is found. This is what I had in mind: while not drive ...

pythonhtmlgoogle-chromeseleniumselenium-chromedriver

Using the ternary operator in a Python HTML template

Exploring various python ternary operators, I came across this one: a if b else 0 However, it didn't function as expected when I attempted to integrate it into a Django HTML template. {% a if b else 0 %} Here is the specific code snippet that I pl ...

pythonhtmldjangoif-statementternary-operator

"Slice" the text in HTML

In my HTML code, I utilize a smarty variable; <div class="ty-blog__date">{$subpage.timestamp|date_format:"`$settings.Appearance.date_format`"}</div> {$subpage.timestamp|date_format:"$settings.Appearance.date_format"} When compiled, the dat ...

htmlsmarty

Creating a login form using HTML, PHP, and MySQL: A step-by-step guide

UPDATE [13.10.16] After revisiting a previous question of mine on stackoverflow that has low reputation, I realized the reasons behind it and decided to update it to make it more relevant. When I initially asked this question, I was attempting to create ...

phphtmlmysql

Issues with concealing the side menu bar in Vue.js

I've been attempting to conceal the side menu bar, with the exception of the hamburger icon when in the "expanded" state. Despite my efforts to modify the CSS code, I am still struggling to hide the small side menu bar. The following images represent ...

javascripthtmlcsstypescriptvue.js

Align the content vertically in a Bootstrap column that takes up the full height

Is there a way to make sure that the columns in a row are the full height of the row while keeping the text content vertically centered? <div class="row fixed-bottom mobile-navbar align-items-center"> <router-link to="/" cl ...

cssbootstrap-4flexboxvertical-alignment

Apply unique colors to each accordion title in CSS

I am working with a bootstrap accordion and I want to customize the color of the h4 titles for the elements within the DOM. My goal is to have distinct colors for the first 4 elements, then repeat those colors. .my-platform-title:nth-child(2n+1) { c ...

htmlcsstwitter-bootstrap