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中，用于放置工具提示：

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

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

Answer 2

我对您的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>

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

2 个答案: