0

This should be simple for the style gurus.

enter image description here

In the figure above, A and B are images in a DIV. Hovering on A brings up the tooltip, but B is obscuring it. The required result is that the tooltip should not be obscured by B, pretty obviously.

Relevant HTML

<html> <head> <titleMy Website</title> <script src="mywebsite.js"></script> <script src="jq_js/jquery-3.1.1.min.js"></script> <link rel="stylesheet" type="text/css" href="bs/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/mywebsite.css"> <link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet'> <link href='//fonts.googleapis.com/css?family=Lobster Two' rel='stylesheet'> <script src="bs/js/bootstrap.min.js"></script> </head> <body onload = "javascript: isShopperLoggedIn();"> <div class="marginate"> <div id ="headerStrip" class = "bkwhite well well-sm"> <img align="middle" src="images/logo_small.jpg" alt="mywebsite"/> : : : <!-- Shops results --> <div class="shops"> <div class="sHeader"> <p id = "srTitle" class="sTitle"></p> </div> <div id="sResults" class="resultsDiv"> </div> </div> </div> </body> </html>

Relevant JavaScript / JQuery

function drawCard(array) { var sResultsDiv = document.getElementById('sResults'); sResultsDiv.innerHTML = ""; var html = [""]; $.each(array, function(cardNum, value) { logoID = "logo" + cardNum; logo = array[cardNum].logo; logo = logo.replace("..", "gs"); name = array[cardNum].name; addr = array[cardNum].address; mob = "Mob.: " + array[cardNum].mobile; ll = "Land: " + array[cardNum].landline; tooltiptext = '<b>' + name + '</b><br/>' + addr + '<br/>' + mob + ' | ' + ll; htmlFString = [ '<div class="logo-container">', '<div>', '<div class="logo sFront" id=sf' + cardNum + '>', '<div class="tooltiptext">' + tooltiptext + '</div>', '<img id="' + logoID + '" src="' + logo + '" class="logo_img">', '</div>', '</div>', '</div>' ].join(''); html += htmlFString; }); sResultsDiv.innerHTML = html; } // of drawCard(cardData, cardNum)

Relevant CSS

.shops { margin-left: 28%; margin-top: 2%; width:auto; height: 13%; padding: 8px; border-radius: 6px; overflow-y: auto; box-shadow: 1px 1px 1px 1px darkgray; } .sHeader { background-color: white; padding: 2px; color: darkgray; text-align: left; top: 648px; width: auto; left: 30%; position: fixed; } .resultsDiv { margin-top: 10px; } .sFront { width: 110px; height: auto; z-index: 1000; position: relative; top: 0; left: 0; } .logo-container { display: inline-table; perspective: 1000px; width: 110px; height: auto; } .logo { margin: 1px; float: left; display: table-cell; flex-flow: row wrap; transition: 0.6s; } .logo_img { display: block; margin:auto; width: 50%; } .logo .tooltiptext { visibility: hidden; font-size: 12px; width: 245px; height: auto; background-color: black; color: lightgray; text-align: left; border-radius: 6px; padding: 5px; position: absolute; z-index: -1; left: 80%; opacity: 0; transition: opacity 1s; } .logo .tooltiptext::after { content: ""; position: absolute; top: 35%; right: 100%; margin-top: -15px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; } .logo:hover .tooltiptext { visibility: visible; display: block; opacity: 1; }

Saw many solutions on SO but none could specifically address this problem. Among other suggested things, tried overflow: visible (in almost all classes) to no avail.

Please let me know what is missing.

Many thanks in advance!

Improve this question
3
  • Set the z-index to a high number. Commented Mar 22, 2017 at 2:39
  • Set the z-index to something 1000 Commented Mar 22, 2017 at 2:41
  • @RobbyCornelissen, thanks! In the only class it appears above, I changed it to z-index: 9999. No luck... Commented Mar 22, 2017 at 2:41

1 Answer 1

Reset to default
1

It's difficult to say for sure what the issue is without also seeing some HTML.

I've created a fiddle here. For the tooltip text I ended up removing your left: 80% and used margin-left instead. Odds are this won't work for you since I couldn't infer from your CSS what your HTML markup looked like. If you update your question, I can better assist with the issue.

Edit: Sorry for the delay. After looking through your code you've got a few minor mistakes in your javascript where you create the elements dynamically. You're missing a closing tag on your img element and it seems like you've an extra enclosing div element that seems to serve no purpose.

The main reason why you're tooltip is not working as you expect it to is because

  1. in your .logo .tooltiptext change the z-index:-1 change it to something larger like 101 and change the left:80% to 20%
  2. in your .logo-container remove the perspective:1000
  3. in your .sFront remove the position:relative

If you do that I think it will function as you intend. Here is a jsfiddle. Hope that helps!

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you! Did the same change you did, no luck. Please review the updated question, it has almost everything I am trying, with some more CSS classes too.
Thanks @nraduka! Switched to Bootstrap tooltips. Please allow me sometime before I use your suggestions.
Stripped off the (recently added) Bootstrap stuff, applied your changes (and some very custom and irrelevant fixes), and the tooltip does show over and above the adjacent images. It all works now, thanks @nraduka!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.