CODEWITHSUNDEEP
htmlcss
Francois Lemieux
Francois Lemieux

Reputation: 59

Positioning a child div outside of parent div

i have a table that have tooltip on mouseover, i would like to show 20px x 20px outside of the parent div

so for example if the cell is on the top left quarter of the table it the top tooltip appear 20 px below the bottom of the cell and 20 px to the right this works awesome, but i can't figure how to make the rest work properly, how can i go above or on the left of a div, ex, how can i make my div at the bottom right not over flow with the outside of the page.

i have tried this:

.HeatMapTooltip.rightHM.topHM{
  right:-115px;
  margin-bottom:-118px;
}

But with no success

This image is an example of the 4 quarters of my table.

Example of cell position in table

thank you in advance

https://jsfiddle.net/vnLxe23b/2/

Upvotes: 1

Views: 55

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

You want to make use of margin-left and margin-top rather than right and bottom.

The following should overwrite your existing rules:

.HeatMapTooltip.rightHM.topHM {
  margin-left: -154px;
  margin-top: 20px;
}

.HeatMapTooltip.leftHM.bottomHM {
  margin-left: 20px;
  margin-top: -114px;
}

.HeatMapTooltip.rightHM.bottomHM {
  margin-left: -154px;
  margin-top: -65px;
}

This can be seen working here.

You may need to adjust the values to suit.

Upvotes: 1

Related Questions