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

Using AngularJS Material's mdDialog to show locally stored data in a template

In the controller, the section responsible for spawning mdDialog appears as follows: $scope.removeAttendee = function(item) { console.log(item); $mdDialog.show({ controller: DialogController, templateUrl: 'views/removeMsg.tm ...

javascriptangularjsangularjs-controllerasangularjs-material

Unable to click on hyperlinks in TinyMCE's read-only mode

I have a situation where I am displaying TinyMCE content inside a modal in read-only mode to show the user the information but not allow them to edit it. The content displays correctly, however, my links are not functioning. When clicked, they do not tri ...

javascriptangularjstinymcetinymce-4

What is the best way to organize controls on my website?

My web page controls need to be organized in the specific layout below: Header Left Content - Main Content - Right Content Footer Is there a control available that can assist me with achieving this layout? I prefer not to use a table since it may not b ...

asp.nethtmlcss

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...

htmlcssjsp

How can I override the maximum body width to enable specific div elements to extend beyond that limit?

While I've come across similar questions to mine, none of them seem to solve my specific issue. Essentially, I've set the body width to 960px, which is a common standard practice. However, there are certain elements such as header, footer, and so ...

htmlcss

What is causing the element to disappear in this basic Angular Material Sidenav component when using css border-radius? Check out the demo to see the issue in action

I have a question regarding the Angular Material Sidenav component. I noticed that in the code below, when I increase the border-radius property to a certain value, the element seems to disappear. <mat-drawer-container class="example-container" ...

javascripthtmlcssangularangular-material

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

i have a random-posts script for my blogger website <div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function nooprandomposts(json){ var total = ...

javascriptcssblogger

What steps are involved in creating a mobile web app using Visual Studio 2012, jQuery, and ASP.NET MVC?

As a beginner in asp.net, I am tasked with creating a mobile web app project. Before diving into development, I would like to first focus on designing my app. Can anyone provide guidance on how I can achieve this? Any help is appreciated. ...

jqueryhtmlcssasp.net-mvc

What is the method for printing a background image with CSS?

I recently implemented the ASP Net Sprites package to create CSS Sprites for my website. While the sprites are working perfectly on the webpage, I've encountered an issue where the generated images do not show up when the page is printed. Here' ...

htmlcssprintingimage

Direct user to a new page when form is successfully submitted using UI

For my AngularJS app, I am utilizing UI Router. Once the form is submitted, I aim to redirect to a different page. Although the $state.go('brands') line does not seem to be working as expected, the console.log(data) function is running smoothly. ...

angularjsangular-ui-router

A guide to displaying dropdown values above a modal

I have encountered an issue while using a dropdown inside a modal window. The problem is that not all the dropdown values are visible, as the overflow part gets hidden. I am looking for a solution to keep the dropdown value at the top and prevent it from b ...

javascripthtmlcssreactjsweb

Understanding which page is being rendered through _app.js in React/Next.js is crucial for seamless navigation and

Currently, I am working on rendering my web navigation and footer on my _app.js file. My goal is to dynamically adjust the style of the navigation and footer based on the specific page being accessed. Initially, I considered placing the navigation and foot ...

javascripthtmlcssreactjsnext.js

Custom sample rate options in RecordRTC allow for the recording of silent audio tracks

I am currently working on implementing RecordRTC.js to capture audio from a microphone and then upload it to a server built with nancyfx. Initially, I am simply aiming to upload the audio stream and store it in a wav file for testing purposes. However, my ...

javascriptangularjswebrtcgetusermedia

sliding to the right gets jammed

I am encountering a peculiar issue with Multi-page slide functionality. Whenever I attempt to switch pages, the new page gets stuck on the left before sliding out into position. Feel free to test this problem using my JSFiddle This is the JQuery code that ...

javascriptjqueryhtmlcssslide

Animating Brightness and Contrast in CSS

I come from a strong background and I am looking to create a dynamic loop that changes the brightness using CSS specifically on Chrome. The goal is to have the background color match the user's profile, providing a unique experience each time. For ex ...

css

Looking to design a popup using CSS styles

How can I design a pop-up window using CSS for a specific div? I also want to display additional information within another div inside the popup. ...

csshtml

Ways to eliminate the lower boundary of Input text

Currently, I am working on a project using Angular2 with Materialize. I have customized the style for the text input, but I am facing an issue where I can't remove the bottom line when the user selects the input field. You can view the red line in t ...

javascriptcssangularsassstyles

Integrating AngularJS into the Bitnami MEAN stack platform

Despite successfully activating all the JS programs for the MEAN stack, I am facing issues with Angular. I have attempted to understand the process of creating .bowerrc in my application directory, but it's proving challenging. Following the instruc ...

angularjsbowermean-stackbitnami

Incorporating AngularJS 1 into the design of a fresh "foobar" user interface overlay

Currently, I am working with AngularJS 1 along with angular-material and ui-router. Is there a preferred method for implementing a user interface for a new "foobar" feature? For instance, let's say I have a ui.route leading to /app/#/foobars/, which ...

angularjsangular-ui-routerangular-material

Updating $scope in the controller does not automatically update the DOM

I am attempting to persist the complete scope in a service so that it remains available and properly configured even if the user navigates away from the screen and returns later. I have set up a service where I store the current scope. Then, I assign the ...

angularjsangularjs-scope