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 #include <stdlib.h> #include <stdio.h> void SkipRestOfTheLine(void) { while (1) { int c = fgetc(stdin); if (c == EOF || c == '\n') break; } } char GetStuff(void) { while (1) { int c = fgetc(stdin); if (c == EOF) exit(EXIT_FAILURE); // Deal with this case in an appropriate way if (c == 'A' || c == 'P') return c; printf("invalid input, enter again (A for AM or P for PM): "); SkipRestOfTheLine(); } } int main(void) { char c = GetStuff(); return 0; } icon requires the pseudo-element .glyphicon to render the icon using the :before property.

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

Natural Element State:

content

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

:hover

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

Solution

Consider nesting another element within the .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; } element of the span icon.

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

Html Example:

span

CSS Example:

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

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

Code Snippet Demonstration:

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

Icon get disappeared after hover in css

1 个答案:

Problem

Solution