I exclusively use CSS for my tooltips, no images involved

I created some CSS code for a tooltip element

.toolTip{
    display:inline;
    position:relative;
}

.toolTip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

For the HTML:

    <p title="tester" class="toolTip">test</p>
    <img src="images/people/Tapolci_Jeff_abg_web.png" class="toolTip" title="Jeff T." alt="Jeff Tapolci" />

The tooltip is functioning properly with text content, but not with images. How can I resolve this issue?

View Fiddle

htmlcss

Answer №1

One thing to keep in mind is that img elements are considered replaced elements, therefore pseudo elements like :before or :after will not function as expected. To work around this limitation, you can wrap the element in a span and apply the class to that instead.

Check out a Demo on Fiddle

Replaced Elements:

In CSS, a replaced element is an element whose appearance is defined outside of CSS. These elements are external objects that are displayed independent of CSS styling. Common examples of replaced elements include <img>, <object>, <video>, and form elements like <textarea> and <input>. Some elements, like <audio> or <canvas>, are considered replaced elements only under specific circumstances. Objects inserted using CSS content properties are classified as anonymous replaced elements.

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

What is causing gog.com to malfunction when accessed through chromedriver?

Can you figure out why the appearance of gog.com differs between Google Chrome (left) and Chromedriver (right)? https://i.sstatic.net/m08Jh.jpg It's noticeable that things appear distorted and broken in Chromedriver. Even after comparing the two HTM ...

htmlseleniumgoogle-chromeselenium-chromedriver

Ways to alter the color of an icon when hovering over it

Is there a way to change the color of a material icon inside an IconButton material component when hovering over the IconButton? I've tried adding a class directly to the icon, but it only works when hovering over the icon itself and not the IconButto ...

javascripthtmlcssreactjsmaterial-ui

Transforming jQuery into Angular - Press Button to update choices in Dropdown List

I am looking to integrate some AngularJS features into a website that currently utilizes jQuery. Here is the issue I am facing: With jQuery, clicking a button triggers a dropdown item change. Please refer to the jsfiddle below for an example: $('# ...

javascriptjqueryhtmlangularjsforms

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

Is it a mistake in the Jquery logic or a syntax error?

Is there a logic or syntax error causing one of the options when clicking the radio to not display the corresponding tables with the same number of option dates? <style> #ch2 ,#ch3 ,#ch4 ,#ch5 ,#ch6 ,#ch7 ,#ch8 ,#ch9 ,#ch10 ,#c ...

jqueryhtml

The order of event handlers in jQuery

I am currently setting up event binding for a text element dynamically. Take a look at the following code snippet: <input type="text" id="myTxt" /> <script type="text/javascript"> function attachEvent1(element){ element.keyup(func ...

javascriptjqueryhtmlevents

Utilizing divisions for specifying CSS attributes

I'm attempting to distinguish the CSS properties of two tables based on which DIV they are contained within. If you take a look at http://jsfiddle.net/jdb1991/tpXKT/, you will notice that the table in "resultA" is utilizing the TD property designated ...

css

Tips for combining HTML and JavaScript on a WordPress site

As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...

javascriptphphtmlwordpress

The structure becomes disrupted when the Material Ui grid is enclosed within a div container

I currently have a responsive dashboard built with Material Ui's Grid elements. One of the grid items is wrapped in a div element, causing the layout to break. Check out the playground with the div element here: https://codesandbox.io/s/basicgrid-mat ...

javascriptcssreactjsmaterial-uigrid

Television Mount for Precise Video Placement

Seeking assistance for a unique positioning challenge I am facing. I have a Video that needs to be placed on the home page with a TV-like image "frame" around it, and they should scale together. https://i.sstatic.net/2pLhi.png What I've attempted i ...

htmlcss

Are you experiencing font compatibility issues on iOS devices? Is it possible that only certain fonts are not displaying correctly?

Working on a mobile landing page specifically tailored for iPhones, I want to make Rockwell the h1 font on the page. Here is the URL that I am referring to: radionowheremusic.com/mobile7.html Interestingly, when I view the page on my phone, the header fo ...

htmlioscssfonts

Removing scrollbar from table in React using Material UI

I successfully created a basic table using react and material UI by following the instructions found at: https://material-ui.com/components/tables/#table. The table is functioning properly, but I am finding the scrollbar to be a bit inconvenient. https:// ...

htmlcssreactjstypescriptmaterial-ui

What is the best way to bring in an external webpage using Jquery and Custom variables into an Iframe?

Is it possible to use JQuery to load a page into an iframe? I have a specific page that generates a custom printable PDF and I want it to be loaded into an iframe for user convenience. Since I utilize jQuery to fetch all the necessary variables, I cannot ...

javascriptjqueryhtmliframe

Create a CSS path that connects two points by drawing a line

My image is currently animating along a path, but I want to make the path itself visible. Here's the CSS code: div { width:10px; height:10px; background:red; position:relative; -webkit-animation-name:Player1; -webkit-animatio ...

htmlcss

Troubleshooting Autocomplete User Interface Problems

I am currently working on a website user interface and I have encountered an issue specifically in IE7. When searching for a company, the display is not showing up correctly, as demonstrated in the image below. This problem only occurs in IE7, it works fi ...

javascriptcssjquery-uiautocompleteinternet-explorer-7

What is the reason for receiving 'undefined' from await page.Evaluate() function call?

My attempt at creating a deploybot using nodejs is encountering an issue when trying to access the environments page, as it's unable to locate the button. The code snippet in question is as follows: //wait until element with unique id contain ...

htmlnode.js

Say goodbye to tables and hello to CSS div layouts!

Is there a way to align three or four elements without relying on tables? I want them to follow this format: The reason I am asking is because my current method involves using tables, but they are not allowing me to set a specific height for the "test" bo ...

htmlcssalignmentcss-tables

Is there a way to ensure uniform font display across all browsers?

Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...

htmlcssinternet-explorerfonts

Installing Fontawesome 4.3

I recently downloaded the Fontawesome pack, which includes css, Less, and other supporting files. I have successfully copied these files to my website. My website is running on the Gantry framework, which requires me to edit the Head Section in order to a ...

cssfont-awesome

Ways to extract a specific line of text from HTML code

Can someone help me extract a specific line from an HTML code using Python? For instance, in this website: The snippet of code is as follows: var episodes = [[8,54514],[7,54485],[6,54456],[5,54430],[4,54400],[3,54367],[2,54327],[1,54271]]; I am lookin ...

pythonhtmlweb