Arrange a div close to another div with the help of absolute positioning

My goal is to create a tooltip-like positioning for an element within the same container as another element. When clicked, this particular element will display a div containing a table.

You can find the complete code here: http://jsbin.com/xihebol

When someone clicks on .child-table-link, the .child-data-table-container should be positioned relative to the clicked link.

Here's the code snippet I'm using inside the click handler of the .child-table-link:

var _this = $(this);
$(".child-data-table-container").css({
          "left": _this.offset().left - ($(this).width / 2),
          "top": _this.offset().top
})

The top property works fine, but the left property doesn't seem to work. How can I fix this? Essentially, I am looking for a general way to position an element relative to another element in the viewport.

javascripthtmlcss

Answer №1

The issue lies in the miscalculation of the left position; setting "left" to the negative width of the tooltip container will align it to the left edge of the link. Here is a corrected example:

.canvas {
  display: flex;
  align-items: center;
  justify-content: center;
}

.linkContainer {
  position: relative;
  background: #000;
}

.tooltip {
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;
  top: 0;
  left: -100px;
}
<div class='canvas'>
  <div class='linkContainer'>
    <a href='#'>LINK</a>
    <div class='tooltip'></div>
  </div>
</div>

In this demonstration, the tooltip has a width of 100px and the left position is set to -100px.

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 jQuery to apply a class based on JSON data

This file contains JSON data with details about seat information. var jsonData = { "who": "RSNO", "what": "An American Festival", "when": "2013-02-08 19:30", "where": "User Hall - Main Auditorium", "seats": ["0000000000000000001111111 ...

javascriptjqueryjsonclassobject

Having trouble aligning two divs on the same line and adjusting the controls to expand their width when there is extra space

I am currently creating an application using React and Material UI, incorporating the autocomplete control feature. Take a look at the code sandbox I have set up. Here are some concerns: I am aiming to have two autocomplete controls displayed on the same ...

cssreactjsmaterial-ui

Ui-router experiencing issues with nested view loading due to changes in URL

I have been developing an application and previously used ui-router successfully with Ionic. The issue I am facing now is that although the URL changes correctly as expected, nothing happens afterwards. I am certain that the template is being found because ...

javascriptangularjsuser-interfaceangular-ui-routerrouter

Arrangement within a span

I've been refreshing my HTML/CSS skills in preparation for a new job opportunity. The last time I dabbled in HTML was way back in 1999... Needless to say, I've fallen quite behind. As a big fan of the "Space Trader" game on Palm OS, I've tak ...

htmlcssweb

My objective is to show the div element just once using AngularJS

Here's the scenario I want to show this div just once, not multiple times: //angular js code $scope.arr=["sunday","mpnday","tuesday"]; //html view <ul> <li ng-repeat="x in arr"> <div><p>{{ x }}</p> </div> & ...

javascripthtmlangularjs

What is the best way to reload scripts each time a component is mounted?

My jQuery scripts include animation effects that need to be refreshed whenever something new is rendered on the page. However, I am facing an issue where the jQuery scripts are not being refreshed as needed. Below is my router configuration: export defau ...

javascriptjqueryreactjsreact-router

Accessing Properties in React.js: A Guide

<Element id="1" onClick={this.runFunction(???)}/> When the onClick event is triggered, I want to execute a different function with the key value "1" as an argument. How can I make this happen? Thank you. ...

javascriptreactjs

Utilizing Angular's ng-Grid with Promises

My current setup involves fetching a JSON file through a service to serve as the data source for my grid. The service successfully fetches the data, and the grid renders its basic layout correctly. However, there seems to be an issue with populating the gr ...

javascriptajaxangularjsng-grid

Arrange two Angular 2 divs in a single row, with one positioned below the

Good Evening, I have a project in angular and I need help with styling. Specifically, I have 3 divs - card, table, and map. I want the card and table to be in the same row, and the map to be below them with double the size. The top left should have item in ...

htmlcssangular

Tips for aligning a cluster of floating buttons at the center in Vuetify:

This is the code I am currently working with: <v-container height="0"> <v-row align="center" justify="center"> <v-hover v-slot:default="{ hover }" v-for="(option, index) in options" ...

htmlcssvue.jsvuetify.js

Selenium webdriver unable to locate an empty element

I'm currently trying to find a specific element using selenium webdriver: <div class="lv-product__details"><div class="lv-product__details-head"><span class="lv-product__details-sku"> M40712 ...

pythonhtmlseleniumweb-scraping

Retrieve a specific value from an array within Firestore

I am facing an issue where I can only retrieve the values I need from the array by adding a specific string like "اقلام" or "سبورة". However, I want the value to be passed as a prop from another component or screen. Is there a way to resolve this ...

javascriptfirebasereact-nativegoogle-cloud-platformgoogle-cloud-firestore

Automatically select a radio button upon loading the page

Below is the code I am currently using: jQuery('#choice_1_10_3_1').attr('checked','checked'); I need this radio button to be checked automatically when the page loads. Despite no errors being shown in the console, the code i ...

jqueryhtml

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

My directory structure is as follows: - project |- build |- src |- index.ts |- file.txt The typescript code is compiled to the build directory and executed from there. I am seeking a dependable method to access file.txt from the compiled module without ...

javascriptnode.jstypescriptpath

Ways to access the current element in the Evernote editor that corresponds to the cursor's position?

It seems that Evernote editor uses a Rich Text Editor which differs from the input or textarea tag. Therefore, I am unable to use the provided code to determine its type. Is there a way to retrieve the current element of the Evernote editor where the curso ...

javascripthtml

loop through nested arrays

My goal is to use ng repeat in Angular to iterate through a child array of a multidimensional array. The json object I am working with is as follows: $scope.items = [{ "id":1, "BasisA":"1", "Basis":true, "personSex": ...

javascriptarraysangularjs

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...

javascriptphpjqueryhtml

The custom tab component in React is currently not accepting the "disabledTabs" prop

I have designed a tab component as shown below: tab/index.jsx import React from 'react'; import TabHeader from './header'; import TabBody from './body'; import TabHeaderList from './header/list'; import TabBodyList ...

javascriptreactjs

CSS for a navigation menu with underlined links

I am attempting to create an underline effect when hovering over a link. However, I am facing an issue where the underline does not align perfectly with the line below it. Can someone please guide me on how to modify this CSS so that when the link is hov ...

htmlcss

Error: The $filter function in AngularJS is not recognized

I have been attempting to inject a filter into my controller and utilize it in the following manner: angular .module('graduateCalculator', []) .filter('slug', function() { return function(input) { ...

javascriptangularjs