HTML - Автоматически изменять положение div (всплывающей подсказки) влево, когда оно достигает конца области просмотра

Question

Я дал всплывающие подсказки двум дивам в правильную позицию, используя css. Когда достигнут конец области просмотра, я получаю горизонтальную прокрутку, когда отображается всплывающая подсказка. Как я могу изменить поведение, которое автоматически позиционирует всплывающую подсказку слева? У меня есть код в angular app.component. css следующим образом

p {
  font-family: Lato;
}


.swidth {
    position: relative;
    cursor: pointer;
}


.swidth:hover .type-text {
    display: block;
}

.type-text {
    display: none;
    position: absolute;
    background: #939393;
    border: 4px solid #939393;
    left: 125%;
    top: -12px;
    padding: 4px;
    border-radius: 5px;
    width: 152px;
    font-size: 12px;
    color: #cccccc;
    z-index: 1;
}

.pb-mb-3 {
    padding-bottom: 3px;
    margin-bottom: 3px;
}

.type-text:after,
.type-text:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.border-bottom-grey {
    border-bottom: 1px solid #cccccc;
}

/* .type-text:after {
    border-color: rgba(116, 129, 149, 0);
    border-right-color: #748195;
    border-width: 30px;
    margin-top: -30px;
} */
.type-text:before {
    border-color: rgba(116, 129, 149, 0);
    border-right-color: #939393;
    border-width: 10px;
    margin-top: -11px;
}

.card {
    position: relative;
}

В app.component. html У меня есть следующий код

<div class="viewContent" style="display:inline-block">
    <div class="text-center swidth iconbdr view-type">
        <div class="type-text ">
            <div class="border-bottom-grey pb-mb-3">Technology
            </div>
            <div>Business </div>
        </div>
        <div class="view-count" style="margin-top:5px">view
        </div>
        <div class=" view-count">
            <span class="secondaryInfo d-inline-block pb-0">123</span>
        </div>

    </div>
</div>

<div class="viewContent " style="display:inline-block;margin-left:270px">
    <div class="text-center swidth iconbdr view-type">
        <div class="type-text ">
            <div class="border-bottom-grey pb-mb-3">Technology
            </div>
            <div>Business </div>
        </div>
        <div class="view-count" style="margin-top:5px">view
        </div>
        <div class=" view-count">
            <span class="secondaryInfo d-inline-block pb-0">123</span>
        </div>

    </div>
</div>

Stackblitz link здесь: https://stackblitz.com/edit/angular-cmopwb

Заранее спасибо

Answer 1

не лучшее решение, но по идее я создаю новый класс в css, затем я определяю между шириной окна и шириной вашего элемента, затем я использовал его как класс в appcomponent

https://stackblitz.com/edit/angular-ihsaj1

В апкомпоненте

 innerwidth=window.innerWidth;
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    console.log("girdi");
    this.innerwidth = window.innerWidth;
  }
  constructor(private _el: ElementRef){}

  getClass(ref){
      if(ref._el.nativeElement.offsetWidth+186>=this.innerwidth){return "type-text-left";}

  }

в html я использовал как имя класса

<div class="type-text {{getClass(this)}}  type">

и в css я написал для type-text-left