CSS 工具提示背景颜色已隐藏

Question

这是我的代码：

/* Tooltip container */

.tip {
  position: relative;
  display: inline-block;
  cursor: help;/*change the cursor symbol to a question mark on mouse over*/
  color: inherit;/*inherit text color*/
  text-decoration: none;/*remove underline*/
}


/*Tooltip text*/

.tip span {
  visibility: hidden;
  width: 80%;
  text-align: left;
  padding: .6em;
  padding-left: 1em;
  border: 1px solid ;
  border-radius: 0.5em;
  font: 400 12px Arial;
  color: #ffffff;
  background-color: #000000;
  display: inline-block;/*Position the tooltip text*/
  position: absolute;/*positioned relative to the tooltip container*/
  bottom: -5px;
  top: 105%;
  z-index: 100;
}

.tip:hover span {
  visibility: visible;
}

<a href="javascript:void(0)" class="tip">
    Container text
    <span>
    Tooltip text
    </span></a>

我正在尝试让我的工具提示在您将鼠标悬停在文本上时显示。问题是，虽然文本（当前为白色）显示在其他元素之上，但背景（当前为黑色）却没有。如何确保背景颜色显示出来以便我的文字可见？

Answer 1

我对您的 css 做了一些改动以使文本可见。您的其余代码看起来不错。运行并从下面的代码片段中检查。

/* Tooltip container */
.tip{
position: relative;
display: inline-block;
cursor: help; /*change the cursor symbol to a question mark on mouse over*/
color: inherit; /*inherit text color*/
text-decoration: none; /*remove underline*/
}

/*Tooltip text*/
.tip span {
visibility: hidden;
width:80%;
text-align: center;
padding: 1em 0em 1em 0em;
border: 1px solid [template("base font color")];
border-radius: 0.5em;
font: 400 12px Arial;
color: #ffffff;
background-color: #000000;
display: inline-block;

/*Position the tooltip text*/
position: absolute; /*positioned relative to the tooltip container*/
top: 105%;
z-index:100;
}

.tip:hover span {
visibility: visible;
}

<a href="javascript:void(0)" class="tip">
Container text
<span>
Tooltip text
</span></a>

Answer 2

问题出在你的CSS定位工具提示：

position: absolute;/*positioned relative to the tooltip container*/
bottom: -5px;
top: 105%;

您只需使用一个属性指定相对于工具提示容器的偏移量 - 底部或顶部，而不是两者。通过同时使用这两者，您实质上是在为工具提示定义高度，并且由于您的文本太大而无法适应该受限高度，因此它看起来被切断了。因此，只需删除顶部或底部即可解决问题。

CSS 工具提示背景颜色已隐藏

CSS tooltip background color hidden

css

tooltip

qualtrics