Solution 1 :

not the best solution but as idea I create new class in css then I detect between window width and your element width then i used it as class in appcomponent

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

In apcomponent

 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";}

  }

in html i used as class name

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

and in css i wrote for type-text-left

Problem :

I have given tooltips to two divs to right position using css. When the end of viewport is reached I am getting horizontal scroll when tooltip is show. How can i change the behaviour that automatically position tooltip to left?
I have the code in angular
app.component.css as follows

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;
}

In app.component.html I have code as follows

<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 is here: https://stackblitz.com/edit/angular-cmopwb

Thanks in advance

Comments

Comment posted by roopteja

Thanks for the solution Cagri. But when I am trying to add more number of elements i.e I will be getting those divs dynamically. If the div is on the right most corner then only the tooltip should be shown to left. When I plug in your code and run it every time I am getting the tool tip to left irrespective of inner width

By

Leave a Reply

Your email address will not be published. Required fields are marked *