Tips for aligning a hover div to the position of an element

Please check out this jsfiddle for reference: http://jsfiddle.net/bhellman1/Na3hd/11/

Currently, the hover box appears in the same position for all items when you move over the box.

What I want to achieve is to position the hover box based on which #box.corner you are hovering over. If the #box.corner is on the left of the box, I would like the hover box to appear on the left, outside the box, centered to the corner.... If you hover over a #box.corner that's on the bottom right, I'd like the hover box to display at the bottom right, centered to the corner.

Do you have any suggestions on how to implement this?

Thank you

Answer №1

If I've understood your question correctly, this should be the solution you're seeking: http://jsfiddle.net/Na3hd/17/

In order to optimize the code for reuse and assignability to other elements, I made some adjustments to the CSS to highlight commonalities among different elements. By moving the hoverbox definition inside the mouseenter function, a new div is created with each mouseenter action, avoiding any issues with positioning.

I trust this clarifies things for you!

UPDATE

Alternatively, here's a more dynamic approach: http://jsfiddle.net/Na3hd/22/

Additionally, upon further review, it appears that you wished for these items to appear outside of the boxes.

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

Why is the first item behaving strangely when animating item size in Isotope?

I recently started exploring Isotope and stumbled upon a blog post by the creator detailing how to animate item sizes. I decided to incorporate this feature into a project I'm working on. The layout consists of three vertical columns, with each item ...

javascript jquery jquery-masonry

The amazing property of AngularJS - Scope

I have saved this HTML code in a file. Here is the HTML :  <input type="checkbox" name="checkbox1" id="checkbox-group1" ng-model="checkbox1" value="group1"> <input type="checkbox" name="checkbox1" id="checkbox-group2" ng ...

javascript html angularjs radiobuttonlist

The curious case of unusual behavior in jQuery's livequery() method

When attempting to use the jQuery plugin "livequery" to highlight certain words within dynamically generated search results, the highlighting does not appear to work! Strangely, adding an alert() function before executing the code causes the highlighting ...

javascript jquery livequery

Updating AJAX in Laravel 5.2: A Comprehensive Guide

After successfully editing using the code below, I am facing an issue where the edited message is not being stored in the database. Can you help identify the problem? This is my controller: public function patchUpdate($id, messageRequest $request) { ...

php jquery ajax laravel

Encountering Issues with Ajax Request in the Google Play App

I am facing an issue with my Phonegap app. It functions perfectly in debug mode and when installed as an apk file from Phonegap. However, when I upload it to Google Play Store and then download it from there, my ajax requests stop working. I have added the ...

android jquery ajax google-play phonegap

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

To enhance readability, the intricate code has been abstracted. Within our Angular 2 project, we are working with a component called <top-component> (LEVEL 1): <top-component> </top-component> This component includes a template known a ...

javascript html angular typescript dataflow

Balancing scrolling status in sibling components within React/Redux

Is it possible for a React component to control the scroll position of another sibling component? The main component, known as Parent, includes two child components: List (which contains a scrollable div) and Actions with a button that is meant to control ...

javascript reactjs architecture redux react-redux

Can a PHP file be used in the src attribute of an HTML5 audio element?

Within my PHP code, I am attempting to include an audio tag like this: '<audio src="song.php" />'.$fallback.'</audio>' I have experimented with various approaches in the "song.php" file, but unfortunately, none of them hav ...

php html audio attributes src

Creating a simulation of a JavaScript callback within a C# host program

Currently, I am in the process of developing a c# application with an embedded web browser control. In this project, I'm facing a challenge where I need to call a C# method from JavaScript and pass a JavaScript callback using the dynamic technique exp ...

c#javascript unit-testing webbrowser-control

Issues related to timing with $http requests in AngularJS

Encountering two issues here. I am attempting to fetch a value from an $http response and store it in a variable that is supposed to update multiple DOM elements. The problem arises when there seems to be a timing issue where the function calling the $http ...

javascript angularjs promise angular-promise angularjs-http

Tips for temporarily halting my animation using javascript

I'm working on animating a background image and I'd like to implement a pause feature within this function. Do you have any suggestions for the best practice to do this? function scrollBg(){ //Move to the next pixel row. current -= step; ...

javascript jquery animation

Remove an element from an array based on the index provided by the front end

Currently, I am attempting to eliminate a specific item from a PHP array stored in a JSON file. Here is an example of the JSON file structure: { "1.49514754373E+12": { "description": "I don't like it", "fileNames": [ " ...

javascript php json

Having trouble aligning form in the center with Tailwindcss

Currently, I am working on a Rails 6 application and designing a form. My goal is to center the form in the middle of the page while utilizing TailwindCSS for styling. However, upon adding the 'with' property, instead of centering, the form shift ...

css tailwind-css

Modify the background of a Div element by selecting an alternate color palette

Here is my code that changes the background of a Div on select change from a dropdown. I believe there might be a more efficient way to achieve this. Can anyone provide recommendations? Thank you for taking a look. $(document).ready(function() { $(" ...

javascript jquery

Is there a way to identify and count duplicate data-items within an array, and then showcase this information using a react view?

If we have an array like this: [{id: 1, name: "chocolate bar"}, {id:2, name: "Gummy worms"}, {id:3, name:"chocolate bar"}] Is there a way to show on the dom that we have "2 chocolate bars and 1 Gummy Worms"? ...

javascript arrays reactjs data-structures reduce

Using JavaScript to submit the value of a checkbox

I'm currently working on a form submission using JavaScript that includes both text input and two checkboxes. <script> function SubmitFormData() { var preferredLocation = $("#preferred_location").val(); var relocation = []; ...

javascript php jquery ajax

Alternating CSS Designs for Displaying Multiple Mysql Query Results

I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...

php mysql css

Executing multiple AJAX calls with JQuery

Looking for advice on the following code snippet. I have set both ajax calls to async: false, but it seems that when the function doUpdate2ndAJAX() is called, $(".search").click() also gets executed before doUpdate2ndAJAX() finishes. The current order of ...

javascript ajax jquery

Creating a personalized image resizing function for WordPress

I have implemented the following code in functions.php to fetch the first image from WordPress posts: function grab_first_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/< ...

php css wordpress

Update the delivery status of an Uber Eats order using the Uber Eats API

Hey there, I hope everyone is doing well. I need to update the delivery status of orders on Uber Eats through my app. I am in partnership with Uber Eats and using the Update Delivery Status API for this purpose. The API requires the scope eats.store.order ...

javascript express uber-api

CSSer Q&A