0
Dies sollte für die Style-Gurus einfach sein.Stay-on-top CSS-Tooltipp
In der obigen Abbildung A und B-Bilder in einem DIV. Wenn Sie auf A schweben, wird der Tooltip angezeigt, aber B verdunkelt ihn. Das erforderliche Ergebnis ist, dass der Tooltip offensichtlich nicht von B verdeckt werden sollte.
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;
}
Sah viele Lösungen auf SO, aber keine speziell dieses Problem lösen konnte. Unter anderem vorgeschlagen, versuchte overflow: visible (in fast allen Klassen) ohne Erfolg.
Bitte lassen Sie mich wissen, was fehlt.
Vielen Dank im Voraus!
Setzen Sie den 'z-index' auf eine hohe Zahl. –
Stellen Sie den Z-Index auf etwas 1000 – imprezzeb
@RobbyCornelissen, danke! In der einzigen Klasse, die oben angezeigt wird, habe ich es in 'z-index: 9999' geändert. Kein Glück ... –