Dynamic position change of a content box on mouse hover

Question

I've a section contains some boxes. Each box has a additional content box that is appearing on hover on right of each box. There are enough space to the right of the first three boxes, but not last 2 boxes as well.

My query is how can I change the hover content box position if the right side has enough space of not.

My be you can understand better with this prototype I made. Check Here in Figma

First Box

Last Box

How can I design like this prototype layout that I made for you in figma? Also can you refer to any demo or codebase then It would be better for me.

Thanks.

Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=javascript+OR+CSS+hover+position+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Mar 13 '23 at 07:05
My question is not about basic hover only. I've shown the prototype that I exactly looking for. My it'll be clear to everyone to understand my question. I've already searched regarding this question. — Saif, Mar 13 '23 at 07:15
[Dupe](https://stackoverflow.com/questions/46320823/how-can-i-move-an-absolute-positioned-element-if-out-of-viewport) — mplungjan, Mar 13 '23 at 07:33

score 0 · Accepted Answer · answered Mar 13 '23 at 08:15

Try this:

$('.tooltiptext').each(function(i, obj) {
    if(i % 5 == 3 || i % 5 == 4) {
      obj.classList.add('right');
    } else {
      obj.classList.add('left');
    }
});

.boxs {
  width: 600px;
}

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #D9D9D9;
  position: relative;
  display: inline-block;
}

.box .tooltiptext {
  visibility: hidden;
  width: 150px;
  height: 150px;
  background-color: #615858;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
}

.box .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
}

.box:hover .tooltiptext {
  visibility: visible;
}

.box .left {
  left: 110%; 
}

.box .left::after {
  right: 100%;
  border-color: transparent #615858 transparent transparent;
}

.box .right {
  left: -160%; 
}

.box .right::after {
  right: -6%;
  border-color: transparent transparent transparent #615858;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxs">
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
  <div class="box">
    <span class="tooltiptext">Content Box</span>
  </div>
</div>

Dynamic position change of a content box on mouse hover

1 Answers1