Having Difficulty Positioning Tooltip Beside Input/Label Field

I have created a tooltip using HTML and CSS that appears when hovering over an image. However, I am encountering alignment issues when placing the image next to a textbox/input as it is not inline with the input box, likely due to some absolute positioning.

<div class="box">
  <ul class="list">
     <li>
       <label for="email"><span class="mandatoryField">* </span>Email address</label>                       
       <input id="email" name="email" class="one-quarter" type="text" onblur="MakeLowerCase(this);"/>

         <a class="tooltip" href="#"><img src="images/information.png" alt="Information" height="25" width="25"/><span class="custom info"><img src="images/information.png" alt="Information" height="48" width="48"/><em>Information</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>

     </li>
   </ul>
</div>

CSS:

a.tooltip {
border-bottom:1px dotted #000;
color:#000;
outline:none;
cursor:help;
text-decoration:none;
position:relative;
}

a.tooltip span { 
position:absolute;
top:2em;
left:1em;
width:250px;
margin-left:-99em;
opacity:0;
text-decoration:none!important;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-webkit-box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-moz-box-shadow:2px 2px 10px rgba(0,0,0,0.4);
-moz-transition-property:opacity;
-moz-transition-duration:1s;
-webkit-transition-property:opacity;
-webkit-transition-duration:1s;
-o-transition-property:opacity;
-o-transition-duration:1s;
}

a.tooltip:hover span {
font-family:Calibri,Tahoma,Geneva,sans-serif;
z-index:99;
margin-left:0;
opacity:1;
}

a.tooltip.top:hover span { 
  top:2em;  
  margin-left:auto;
}

a.tooltip img {
position:absolute;
border:0;margin:-10px 0 0 -55px;
float:left;
}

a.tooltip em { 
font:700 1.2em Candara,Tahoma,Geneva,sans-serif;
display:block;padding:0.2em 0 0.6em 0;
}

.custom {
padding:0.5em 0.8em 0.8em 2em;
}

* html a:hover { 
background:transparent;
}

.critical {
 background:#fca;
 border:1px solid #ff3334;
}

.help {
background:#9fdaee;
border:1px solid #2bb0d7;
}

.info {
background:#3f97b5;
border:1px solid #2bb0d7;
color: white;
}
jqueryhtmlcss

Answer №1

Take a look at this demonstration It could be beneficial for you

Discover CSS TOOLTIP here

Answer №2

There seems to be an issue with the class mentioned below...

Demo

a.tooltip img {
   position:absolute;
   border:0;
   margin:-10px 0 0 -55px;
   float:left;
}

To resolve this, you can try the following solution:

a.tooltip img.static {
    position: static;
    float: none;
    margin: 0;
    vertical-align: top;
}

Make sure to add class="static" (you can use any name) to your img tag.

I recommend cleaning up your code as it appears to be disorganized.

Answer №3

Include the style position: relative; within your anchor class named tooltip. Delete the line top:2em; that is targeting a.tooltip span.

Fingers crossed this solution will do the trick.

Appreciate it.

Answer №4

It seems like you are relying too heavily on negative margins.


margin-left:-99em;
...
margin:-10px 0 0 -55px;

If you already know the exact size of your icon, consider setting the top and left positions without using relative values.

Check out the Demo

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

Is there a pure JavaScript solution to replace jQuery's .prev() function?

Looking for a JavaScript alternative to this jQuery code: $(".q-block-container").prev(".sub-block-container").css("border-bottom","none"); I am seeking a pure JavaScript solution that selects the previous sibling ONLY if it matches a specific selector ( ...

javascriptjquery

Ways to utilize jQuery for selecting IDs that are not part of a specific class

I am currently working with a jQuery script that is designed to target all IDs containing 'Phone'. However, I am facing an issue where I need the selection to ignore those IDs if they are part of a specific class. The current code I have, from m ...

jquerycss-selectors

form submission issue with return false not working

Despite my efforts, the form still redirects to the page. I've been awake since 1AM trying to troubleshoot this issue! Please assist! function del_entry() { $('.delete_deal').submit(function() { var $g = $(this); ...

javascriptjqueryajaxformssubmit

Validation check for zip codes that flags errors specifically for certain states

I am working on designing a form that triggers an error message when users enter a specific zip code or range of zip codes. For instance: If someone fills out a form and types in a zip code from Washington state, I would like an error message to appear i ...

javascriptjqueryvalidationzipcoderequired

What is the best way to refresh information following its removal?

In my app, I have implemented a feature where posts are displayed as HTML cards using a component called PostList. Each card has a delete button to remove it from the list. The issue I am facing is that when I delete a card, it remains visible in the post ...

htmlangulartypescriptreload

Recording a message from an HTML input using NodeJS and socket.io

I am currently working on a project where I want to log user input from an input box to the NodeJS console. For example, if a user types "Hello world" into the input box and clicks "Send message to console", I want it to show up as "Hello world" in the con ...

javascripthtmlnode.jssocket.io

"Converting an angular date-picker into a popup-date-picker: A step-by-step

I am currently working on a project in Plunker and I would like to implement an Angular date-picker-popup similar to the one in my design. Any suggestions or ideas on how to achieve this? Thank you in advance! ...

angularjshtmlangular

"Successfully made an Ajax request to the web handler, however, the response did not

Within my ASP.NET project, I have a Generic handler with the following code: public void ProcessRequest ( HttpContext ctx ) { try { ctx.Response.ContentType = "text/json"; var jsonData = new StreamReader(ctx.Request.InputStrea ...

jqueryasp.netajaxgeneric-handler

delaying the alteration of an image attribute following an AJAX call

After clicking on a button, a function is triggered (think of it as a published/unpublished button). Immediately after the function is activated, I change the element to display a loader gif. function updateStatus(event, status, element, data, action) { ...

javascriptjqueryajax

Having difficulty creating a shadow beneath a canvas displaying Vega charts

I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work. Here is the code snippet I have for adding shadows: <sc ...

javascripthtmlcsscanvas

Experiencing an issue while attempting to retrieve JSON data from an MVC Controller, with the error message of net::ERR_IN

I am attempting to retrieve JSON data from my controller for use in jQuery. The code I have written seems correct, as visiting the URL in my browser returns the JSON data, confirming that the controller is functioning properly. However, I encounter the fol ...

jqueryjsonasp.net-mvc-4asp.net-coreasp.net-core-mvc

Trigger an Ajax request by clicking on the ShowLink button in JqGrid

When a user clicks on a link in a jqGrid, I want to load dynamic HTML content. Here is the function I have defined: function loadUserAdministrationList() { jQuery("#userlist").jqGrid({ url: '/Administration/GetData/', datatyp ...

jqueryjqgridjqgrid-asp.net

What is the best way to create a floating navigation bar that appears when I tap on an icon?

As a beginner in the realm of React, I recently explored a tutorial on creating a navigation bar. Following the guidance, I successfully implemented a sidebar-style navbar that appears when the menu icon is clicked for smaller screen sizes. To hide it, I u ...

javascripthtmlcssreactjs

The individual HTML content does not appear in Fancybox; instead, it is displayed as part of a gallery

Facing an issue with a single HTML file not displaying in fancybox as expected. Instead of opening individually, it is appearing as part of a gallery with next and prev buttons. Is there a way to hide or disable these navigation buttons? ...

jqueryfancybox

The POST variable comes up empty when making an AJAX request

I am currently attempting to utilize an AJAX call to POST the selected value from a dropdown list. However, I am encountering an issue where the POST variable is coming back empty once a value is chosen from the dropdown. In order to troubleshoot this pro ...

phpjqueryajax

What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

css

The use of htmltools::tags$iframe in Shiny to display an HTML file is not functioning properly when combined with renderUI()

Hello everyone, this is my first question on StackOverflow. I hope you can help me out even though my question may not be in the correct format. I have an HTML widget that was created using flowmapblue.R and saved as a file that I want to display in a Mar ...

htmliframeshiny

Utilizing a CSS identifier with jQuery

I'm struggling with a basic .each statement for comments where I want a form at the bottom to add new comments. The goal is simple - when someone submits a comment, I want it to display just above and move the form down using jQuery. Although this fun ...

javascriptjqueryruby-on-rails

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

http://jsfiddle.net/vmKVS/ I need some help understanding the functionality of slideToggle using a small example. After toggling for the first time, the options element changes color to green. However, I expected the menu element to turn red when I togg ...

javascriptjqueryhtmlcssslidetoggle

Is there a way to refresh only a specific div when clicked?

My preferred tech stack includes Django and Python. Here is the scenario: In models.py : class Contacts(models.Model): lastname = models.CharField(max_length=150) firstname = models.CharField(max_length=150) In views.py def home(request): ...

jqueryhtmlajaxdjangoreload