CODEWITHSUNDEEP
javascripthtmlcss
Deepak Kamat
Deepak Kamat

Reputation: 1980

Position a div near another div using absolute positioning

What I am trying to achieve is a tooltip like positioning of an element that's inside the same contain as the element that when clicked will display a div that contains a table.

The full code can be found here: http://jsbin.com/xihebol

When somebody clicks on .child-table-link the .child-data-table-container is supposed to be positioned relative to the clicked link.

I am doing this 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
})

top works but left doesn't. How I do make it work? In general way to position an element relative to another element in the view-port is what I am looking for.

Upvotes: 3

Views: 809

Answers (1)

Jared Geilich
Jared Geilich

Reputation: 51

The problem is you are calculating the left position wrong, "left" will be the position of the left edge of the tooltip container, so if you want it to sit just to the left of your link, it only needs to be set to the negative width of the tooltip container. Check this out:

.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>

Notice how the tooltip width is 100px, and the left is set to -100px.

Upvotes: 2

Related Questions