Disappearance of icon upon hovering in CSS

I am currently working with Angular JS (1.x) and I have a requirement to display tooltip text when hovering over an info icon. The tooltip text appears properly, but the issue is that the icon disappears when hovered over. It reappears once the hover is removed.

Here 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 this is 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;
}

Is there anyone who can assist me with this issue?

You can also view the JsFiddle example here: https://jsfiddle.net/gLt86eqe/4/

cssangularjstwitter-bootstraptooltip

Answer №1

Issue

To display the icon using the :before pseudo-element, the .glyphicon icon requires the use of the content property.

The content property value for the .glyphicon icon is being overridden in the :hover state to show a tooltip arrow.

Normal State for Element:

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

:hover State for Element:

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

Even though the selectors are different, both rules will affect the same element.

Resolution

Try nesting another span element inside the existing span of the .glyphicon icon.

Add an additional empty span element specifically for tooltips to keep your styling separate and organized.

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:

Update your CSS selectors accordingly to handle the state changes...

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

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

Example of Code Implementation:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selecting specified elements in Jsoup using CSS selectors

Check out this HTML snippet: <div class="last-minute"> <span>Modulo:</span>4-3-3<p>Mandorlini is hopeful to have Juanito Gomez and Cirigliano back in action after the break. There's no need to worry about Hallfredsson who was ...

htmlcssjsoup

Which free and publicly accessible JSON image API is available for testing JSON requests?

Recently, I've been experimenting with AngularJS and am eager to incorporate some images using free APIs. While exploring options, I came across Flickr but was discouraged by the registration requirement for app usage. I am seeking a more accessible s ...

ajaxjsonapiangularjsjsonp

Error: The parent selector "&" cannot be used in top-level selectors. $::webkit-input-placeholder

I am facing an issue while trying to run a legacy create-react-app that utilizes Sass. Initially, when I ran npm start, I encountered the error 'Cannot find module sass', which resembled the message found in this stack overflow post. To resolve t ...

javascriptcssnode.jsreactjssass

Positioning the <div> to the left of a sidebar

I regret to inform you that I am unable to provide an answer at this time. Below is the code snippet provided: #wrapper { width: 844px; display: block; margin-left: auto; margin-right: auto; text-align: left; } #posts { width: 844px; float: left; } .en ...

htmlcss

Accessing properties in JSON data with AngularJS

I am experiencing issues with accessing a JSON object returned from an $http call in my AngularJS app. I have provided the code snippet below, but it seems that nothing is being rendered on the HTML. Can anyone please assist me in identifying what I might ...

javascriptjsonangularjs

Is there a way to show a message when I hover over a different text?

I've been attempting to show a text when hovering over another text, but for some reason it's not working. I've followed all the steps from similar questions, but unfortunately, it still doesn't seem to be functioning correctly. Here i ...

htmlcsshover

Troubleshooting: ng-disabled feature is not properly functioning with Bootstrap buttons

I am currently using a combination of bootstrap.js and angular js in my project. The code snippet I have is as follows: //snippet from the controller $scope.isWaiting = true; $scope.promise = $http.get("voluumHandler.php?q=campaigns&filter=traffic-sou ...

javascriptajaxangularjstwitter-bootstrap

When an element is set to a fixed position while scrolling, it causes the element to flicker

After implementing the jQuery plugin stickyjs on my website, I noticed a strange issue. While it works perfectly fine on my Mac, when using the mouse scroll wheel on my PC, the element blinks once rapidly as it reaches the top of the page. Interestingly, d ...

jqueryhtmlcsssticky

Utilizing REST-API with Angular 2 and Electron

I am encountering an issue with my Electron App that utilizes Angular 2. I had to make a modification from <base href="/"> to <base href="./">, which is a relative path within the file system, in order to make it function properly. However, thi ...

angularjsnode.jsangularelectron

The error message "ReferenceError: cloudSky is not defined when attempting to use csZbar" indicates that the

Currently, I am attempting to utilize the csZbar plugin from this repository: csZbar However, following the instructions provided in the GitHub repository seems to be causing an issue: var app = angular.module('starter', ['ionic']) a ...

angularjsionic-framework

The appropriate method for showcasing cards within lists, such as in the platform Trello

I'm in the process of developing a project similar to Trello, but I'm facing some challenges on how to proceed. Initially, I created an 'init' function within my AngularJS Controller to handle HTTP requests: $scope.loadLists(); ...

javascriptangularjsnode.jsmongodbmongoose

The canvas div wrapper flexbox item is in need of scrollbars

I am looking to display a canvas that may be larger than the viewport size. The layout structure will include navigation on the left and controls on the right, with the canvas positioned in between them. When the canvas is too large for the screen, I wan ...

htmlcssflexboxscrollbaroverflow

Troubles arise when trying to load AngularJS using RequireJS within the application

I am currently developing a NodeJS application that utilizes AngularJS for its front-end. Additionally, I am integrating RequireJS to handle the loading of JavaScript dependencies and then initialize the Angular app. Here is my approach: Inside my HTML fi ...

angularjsnode.jsexpressrequirejs

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

cssnpmsassag-grid

Explore the styling options for SVG using CSS to manipulate different properties of the

After saving my SVG image in Illustrator, the code appears like this: <?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBo ...

htmlcsssvg

What are the differences between Angular's dynamic templating using compile and template function?

I am familiar with the purpose of each item in: compile vs link(pre/post) vs controller Now, consider this simple code: HTML <body ng-controller="mainController"> {{ message }} <div otc-dynamic=""></div> </body> Cont ...

angularjsangularjs-directiveangularjs-compileangularjs-templates

Animate.css does not function properly when loaded locally

I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...

javascripthtmljquerycssanimate.css

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

I'm looking to retrieve the max-width value in px from CSS for use in a JavaScript code. The challenge is that this value might be specified in different units in the CSS file. Any suggestions on how to achieve this using JavaScript? const element = ...

javascripthtmlcss

Clicking on the images will display full page versions

Apologies for not making an attempt just yet, but I'm struggling to locate what I need. Here's the menu structure in question: <div class="overlay-navigation"> <nav role="navigation"> <ul class="test"> & ...

jqueryhtmlcss

Potential image positioned to the left of a detailed description

A Meteor client template helper contains an array of objects {image: url, label: description}. The URL can either point to a valid image file in the public directory or be the string 'non'. The description can range from a few words to several ...

htmlcssmeteor