在CSS中悬停后，图标消失了

Question

我在Angular JS（1.x）上工作，我的要求是我需要在悬停在信息图标上时显示工具提示文本。工具提示文本看起来很好。但是问题在于，当我徘徊时，图标就会消失。一旦我停止徘徊，图标再次出现。

以下是我的HTML代码：

<div class="col-md-4 margin-left-26">            
    <span ng-show="{{ job.information }}" class="glyphicon glyphicon-info-sign
    spark-error-info pad-left-10" tooltip="{{job.information.sparkJob}}">
    </span>
</div>

，我的CSS来了：

.spark-error-info:hover:after{
      content: attr(tooltip);
      padding: 4px 8px;
      color: white;
      position: absolute;
      left: 0;
      margin-top:10px;
      top: 100%;
      z-index: 20;
      white-space: nowrap;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      background-color: #000000;
}
.spark-error-info:hover:before{
    border: solid;
    border-color: #000 transparent;
    border-width: 0px 10px 10px 10px;
    top: 0px;
    content: "";
    left: 97%;
    position: absolute;
    z-index: 99;
}

任何人可以帮我吗？

这是相同的jsfiddle：https：//jsfiddle.net/glt86eqe/4/

Answer 1

问题

.glyphicon图标需要 pseudo-element :before才能使用content属性渲染图标。

此content属性值（对于.glyphicon图标）在:hover状态上被覆盖，工具提示content属性旨在绘制箭头，请参见下文：

自然元素状态：

.glyphicon-info-sign:before {
    content: "e086";
}

:hover元素状态：

.spark-error-info:hover:before {
    border: solid;
    border-color: #000 transparent;
    border-width: 0px 10px 10px 10px;
    top: 0px;
    /* refrain from re-declaring the `content` property value as an empty string */
    /* content: ""; */ 
    left: 97%;
    position: absolute;
    z-index: 99;
}

选择器不同，但两个规则都匹配并应用于同一元素。

解决方案

考虑在.glyphicon图标的span元素中嵌套另一个元素。

可以使用另一个空的span元素专门用于工具提示 - 使用此方法将您的关注点分开。

html示例：

<span class="glyphicon glyphicon-info-sign
    spark-error-info pad-left-10">
   <span class="icon-tooltip" tooltip="Hello this is my fiddle"></span>
</span>

CSS示例：

然后相应地调整您的上下文CSS选择器，以适应给定状态更改...

.spark-error-info:hover .icon-tooltip:after { ... }
.spark-error-info:hover .icon-tooltip:before { ... }

代码片段演示：

.spark-error-info:hover .icon-tooltip:after {
  content: attr(tooltip);
  padding: 4px 8px;
  color: white;
  position: absolute;
  left: 0;
  margin-top: 10px;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #000000;
}
.spark-error-info:hover .icon-tooltip:before {
  border: solid;
  border-color: #000 transparent;
  border-width: 0px 10px 10px 10px;
  top: 0px;
  content: ""; 
  left: 97%;
  position: absolute;
  z-index: 99;
}
.margin-left-26 {
  margin-left: 26px;
}

<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-4 margin-left-26">
    <span class="glyphicon glyphicon-info-sign
    spark-error-info pad-left-10">
      <span class="icon-tooltip" tooltip="Hello this is my fiddle"></span>
    </span>
  </div>
</div>