Как установить границы для position: absolute

Question

Как сделать так чтобы tooltip не выходил за границы content?

.page {
flex: 1;
}
.content {
display: flex;
flex-direction: column;
  width: 100%;
  max-width: 1280px;
  margin: auto;
  min-height: 100vh;
}
.field {

}
.icon {
position: relative;
}
.icon .tooltip {
position: absolute;
top: -100%;
left: 50%;
}

<body>
  <div class="page">
      <div class="content">
        <div class="field">
            <label>Описание <i class="icon"><div class="tooltip">Текст тултипа</div></i></label>
            <div>
            </div>
        </div>
        <div class="field">
            <label>Описание <i class="icon"><div class="tooltip">Текст тултипа</div></i></label>
            <div>
            </div>
        </div>
        <div class="field">
            <label>Описание <i class="icon"><div class="tooltip">Текст тултипа</div></i></label>
            <div>
            </div>
        </div>
        <div class="field">
            <label>Описание <i class="icon"><div class="tooltip">Текст тултипа</div></i></label>
            <div>
            </div>
        </div>
      </div>
  </div>

Цель в том чтобы где бы не находился tooltip, он автоматически отступал от краев content

upd. Чтобы не выходило из этих краев

Answer 1

Вам надо добавить св-во position: relative для родительского элемента

.content {
  position: relative;
  /*...*/
}

/*...*/

Answer 2

.container{
  margin: 0 auto;
  width: 100px;
}

.tooltip {
  position: relative;
  margin-top: 100px;
  text-align: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

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

<div class="container">
    <div class="tooltip">Наведи КА!
        <span class="tooltiptext">Tooltip текст</span>
    </div>
</div>

БЛОГ НА HUSL

Как установить границы для position: absolute

Ответы (2 шт):