Html 随时掌握CSS工具提示
对于风格大师来说，这应该很简单 在上图中，A和B是DIV中的图像。将鼠标悬停在A上会显示工具提示，但B会将其遮挡。所需的结果是工具提示不应该被B所掩盖，这是非常明显的 相关HTML 相关CSS 我们看到了许多解决方案，但没有一个能够具体解决这个问题。在其他建议中，尝试溢出：在几乎所有类中都可见，但没有效果 请让我知道遗漏了什么Html 随时掌握CSS工具提示,html,css,tooltip,Html,Css,Tooltip,对于风格大师来说，这应该很简单 在上图中，A和B是DIV中的图像。将鼠标悬停在A上会显示工具提示，但B会将其遮挡。所需的结果是工具提示不应该被B所掩盖，这是非常明显的 相关HTML 相关CSS 我们看到了许多解决方案，但没有一个能够具体解决这个问题。在其他建议中，尝试溢出：在几乎所有类中都可见，但没有效果 请让我知道遗漏了什么 非常感谢 如果没有看到一些HTML，很难确定问题出在哪里 我创造了一把小提琴。对于工具提示文本，我最终删除了您的左：80%，并使用了左边距。很可能这对您不起作用，因为我无
非常感谢 如果没有看到一些HTML，很难确定问题出在哪里 我创造了一把小提琴。对于工具提示文本，我最终删除了您的左：80%，并使用了左边距。很可能这对您不起作用，因为我无法从您的CSS推断HTML标记是什么样子。如果你更新你的问题，我可以更好地帮助你解决这个问题 编辑： 抱歉耽搁了。在浏览了代码之后，javascript中出现了一些小错误，即动态创建元素。您的img元素缺少一个结束标记，并且似乎有一个额外的封闭div元素，它似乎没有任何用途 工具提示没有按预期工作的主要原因是 在你的.logo.tooltiptext中，更改z索引：-1将其更改为更大的值，如101，并将左侧更改为：80%到20% 在.logo容器中删除透视图：1000 在.sFront中删除位置：relative 如果你这样做，我想它会按照你的意愿运作。这是一本书。
希望有帮助 将z索引设置为一个高数值。将z索引设置为某个值1000@RobbyCornelissen谢谢在上面显示的唯一类中，我将其更改为z-index:9999。不走运…谢谢你！做了和你一样的改变，没有运气。请查看更新的问题，它几乎包含了我正在尝试的所有内容，还有一些CSS类。谢谢@nraduka！切换到引导工具提示。在我使用你的建议之前，请允许我。去掉最近添加的引导程序，应用你的更改和一些非常自定义和不相关的修复，工具提示确实显示在相邻图像的上方。现在一切都好了，谢谢@nraduka！
<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>
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)
.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;
}