CODEWITHSUNDEEP
htmlcsstooltip
Narayana J
Narayana J

Reputation: 307

Stay-on-top CSS tooltip

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!

Upvotes: 0

Views: 7248

Answers (1)

nraduka
nraduka

Reputation: 139

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!

Upvotes: 1

Related Questions