Icon get disappeared after hover in css

Question

I am working on Angular JS (1.x) and my requirement is that I need to show tooltip text upon hovering on info icon. Tooltip text appears perfectly well. But the problem is that icon gets disappeared when I hover on that. Once I stop hover then icon again gets appeared.

Below is my HTML code:

<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>

And here comes my 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;
}

Can anyone help me with this?

Here is the JsFiddle for the same: https://jsfiddle.net/gLt86eqe/4/

Answer 1

Problem

The .glyphicon icon requires the pseudo-element :before to render the icon using the content property.

This content property value (for the .glyphicon icon) is being overwritten on the :hover state, with the tooltip content property intended to draw the arrow, see below:

Natural Element State:

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

:hover Element State:

.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;
}

The selectors are different but both rules match and will apply to the same element.

Solution

Consider nesting another element within the span element of the .glyphicon icon.

Another empty span element could be used specifically for tooltips - using this approach you separate your concerns.

Html Example:

<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 Example:

Then adjust your contextual css selectors accordingly for the given state changes...

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

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

Code Snippet Demonstration:

.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>