Challenges arising from the placement of tooltips among multiple elements

I am currently working on adding tooltips to images on my website, but I am encountering a issue. The images are floated to the left with three images per row and multiple rows. The tooltip is meant to appear on the right side of the image, which works fine for images on the first row. However, when hovering over images on the second or third row, the tooltip appears in the position where it should be for the third image from the top. What could be causing this issue?

Here is my CSS code:

.friend_img { opacity:0.6; margin:0; width:83.333333px; float:left; }
.friend_img:hover { opacity:1.0; }

.friend span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
.friend:hover span{display:inline; position:absolute; background:#ffffff;
border:1px solid #cccccc; color:#6c6c6c;}

And here is the HTML code:

<a class="friend" href="profile.php?id=32">
   <img class="friend_img" src="member.png">
   <span>FIRST NAME LAST NAME</span>
</a>
htmlcss

Answer №1

Here is the updated CSS:

.profile_img {
    opacity: 0.6;
    margin: 0;
    width: 83.333333px;
    float: left;
}
.profile_img:hover {
    opacity: 1.0;
}  
span {
    display: none;
}
.profile:hover span {
    display: inline-block;
    z-index: 100;
    width: 130px;
    top: 20;
    left: 80px;
    position: absolute;
    background: #ffffff;
    border: 1px solid #cccccc; 
    color: #6c6c6c;
}
a.profile {
    position: relative;
    display: inline-block;
}

And here is the HTML code snippet:

<div style="width: 300px; border: 1px solid black; text-align: center;" >
    <div>
        <a class="profile" href="user.php?id=25">    
            <img class="profile_img" src="avatar.png">    
            <span>JOHN DOE</span>
        </a>

        <a class="profile" href="user.php?id=25">    
            <img class="profile_img" src="avatar.png">    
            <span>JANE SMITH</span>
        </a>


        <a class="profile" href="user.php?id=25">    
            <img class="profile_img" src="avatar.png">    
            <span>ALICE WATSON</span>
        </a>
    </div>

    <div>

        <a class="profile" href="user.php?id=25">    
            <img class="profile_img" src="avatar.png">    
            <span>BOB BROWN</span>
        </a>

        <a class="profile" href="user.php?id=25">    
            <img class="profile_img" src="avatar.png">    
            <span>EMMA HARRIS</span>
        </a>


        <a class="profile" href="user.php?id=25">    
            <img class="profile_img" src="avatar.png">    
            <span>MIKE MILLER</span>
        </a>
    </div>

</div>

You can see a live example of this implementation here.

Answer №2

First and foremost, ensure that you designate a.friend with the style of position:relative;

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

Adding content to an Element Id using JavaScript can be done by utilizing the .insertAfter or .append methods. Since it involves a script tag, you cannot use the dollar sign

I need to include a script after a specific div in my HTML code. Here is what I currently have: <div id="uno">insert after this</div><br /> <p>this is a paragraph</p><br /> <div>this is a div</div> var mysc ...

javascripthtml

"Troubleshooting: Fixing the issue with jQuery datepicker not

After implementing the jQuery Datepicker on a field, I noticed that even though assigning a value to the field shows in Chrome's developer tools... https://i.sstatic.net/We7Ua.png Unfortunately, the assigned value does not show on the front end. I ...

javascriptjqueryhtmljquery-uidatepicker

What is the simplest way to display an HTTP response in an alert window?

Struggling to display the JSON response using JavaScript's window.alert or alert. As a non-native JS coder, I apologize for my lack of experience. Here are a few attempts I've made based on online examples. My objective is to showcase the JSON r ...

javascriptjqueryhtmlpopupresponse

Discover how to apply unique styles to specific HTML elements using their index values in jQuery

In the process of creating a party game similar to Tambola or Housie, I am faced with the challenge of automatically detecting and highlighting the numbers called out on each ticket in the game. For instance, if number 86 is announced, I aim to visually di ...

javascripthtmljquerycsshtml-table

Say goodbye to colors and different design elements as you make the switch to Angular Material 1.1.1

Last week, I made the switch in my project from Angular Material 1.0.8 to Angular Material 1.1.1. However, after completing this update, I encountered some styling issues, such as: The hues feature is not functioning properly. For instance, the use of m ...

javascriptcssangularjsangular-material

Intelligent Scrolling with Bootstrap 4

Utilizing a basic tutorial from here to implement show/hide functionality for a standard BS4 navbar on scroll. Works flawlessly on desktop. However, facing an issue with the mobile view where the navbar behaves oddly when scrolling down and returning to t ...

javascriptjquerycssbootstrap-4

Attempting to execute code on a database using PHP and MySQL

Hey there! I am just diving into the world of HTML and PHP, attempting to create a page that can execute an SQL query to transfer data from one table to another. However, I'm facing some difficulties in making it work as I need a user-provided date t ...

phphtmlmysqli

Creating a personalized pop-up container similar to the style seen on YouTube

I am looking to create a popup window similar to the YouTube share feature where it sticks next to a button. I have tried using Bootstrap modal, but it opens in the middle of the screen. I want the popup to appear around the button when the YouTube share b ...

csspopupwindow

Grails: Javascript function for updating the image source is unresponsive

I have a situation where I need to change the src of an img based on a certain condition. The condition is returning true as expected, as confirmed by an alert() that I added previously. However, the function responsible for changing the src of the img and ...

javascripthtmlajaxgrails

Arranging Fancybox images into categories

I am currently experimenting with the fancybox function. It seems to be working fine, but for some reason it is not grouping up based on my Rel attribute. Below is the JavaScript code: <script type="text/javascript"> $(function($){ var ...

jqueryhtmlfancybox

CSS error with contrasting colors, the reason behind it is unknown

Here is the code snippet I am working on: I have set the background color to #f1f5ff and the font color to #181818. Despite thinking that the contrast is good, I am still encountering an error where the text is not visible. I have tried changing 'c ...

htmlcss

Ending the jQuery Modal box

Struggling to create a simple modal on my own, and I'm facing some difficulties (probably because I'm more of an expert in jQuery - but let's not dwell on that too much). This is the HTML markup I have: <div id="modal-boxes"> < ...

javascriptjqueryhtmlmodal-dialog

Observing a web page created by a Java Servlet

After receiving the provided code, I attempted to compile it using a customized version of Dr. Java. However, upon attempting to run the code, I encountered an error message stating: "Static Error: This class does not have a static void main method accepti ...

javahtml

spacing within Bootstrap's divs

While working on a grid layout using Bootstrap styles, I encountered an issue with the col-sm- * classes where the divs appeared too close together and the shadow effect I applied was getting lost. Adding margin to the div helped but caused the last div to ...

cssbootstrap-4

What is the best way to loop through ng-repeat with key-value pairs in order to display each

I need to loop through and show the data stored in "detailsController". <div ng-controller="detailsController"> <div ng-repeat="data in details" id="{{data.Id}}"> {{data.Name}} </div> </div> ...

javascripthtml

Navigating through pages in an Angular application can be easily achieved using Angular Routing

I've been struggling to get this feature to work correctly. Despite trying different configurations outlined in various sources such as this, that and the other, I keep encountering a 404 error whenever I try to refresh the page. Oddly enough, enterin ...

htmlangularjsapache.htaccessroutes

Tips on creating animations for elements that are triggered when scrolling and become visible

Is there a way to animate an element when it becomes visible on scroll, rather than at a fixed position on the page? I'm currently using code that triggers the animation based on an absolute scroll position, but I'm looking for a more dynamic sol ...

javascripthtmlcssanimationcss-animations

Tips for personalizing the color, font style, background color, and alignment of the WhatsApp share button I designed using HTML

Currently, I am working on adding a WhatsApp share button to a webpage. I would like to customize it using some CSS code. Could someone kindly provide me with the code for customizing this button? <a href="whatsapp://send?text=https://vcard.score ...

javaandroidhtmlcss

Tips for retaining the value of a variable when the page is reloaded

I need to store the value of the variable loggedIn, as it determines the behavior of a function in appComponent.html. Can you explain how I can achieve this? Template of app component: <li class="nav-item"> <a class ...

javascripthtmlangulartypescriptangular6

How come it is not possible for me to choose all elements containing an attribute value saved in a variable?

Imagine you have the following snippet of HTML code: <div data-id=5>...</div> <img data-id=5 src=...> <input data-id=5 ...> ... Your task is to select and remove all elements with the attribute data-id set to 5. Here is one attemp ...

javascriptjqueryhtml