ngx-bootstrap Tooltip - Not Dynamic Position

Question

I have a tooltip controlled by ngx-bootstrap, rolling over an icon, a tooltip appears on the top of the icon.

This tooltip looks good if I maximize browsers, but if I minimize them a bit, the tooltip overlaps the icon, that I cannot click on the icon anymore likes the screenshot below:

Below is my code:

<span id="appCancelIcon" class="close-circle_red" tooltip="Cancel Changes" container="body"></span>

This tooltip is dynamic position, top and left values are different based on positions of icons.

I tried to edit in CSS likes below, then the tooltip became a static position. It doesn't matter where icons are, tooltips show in the same position.

.tooltip.top {
    padding: 5px 0;
    margin-top: -15px;
}

My question is How to make tooltips still have dynamic position and won't overlap icons?

Thanks!

Answer 1

In your HTML code, along with tooltip, add placement property also.

<span id="appCancelIcon" class="close-circle_red" tooltip="Cancel Changes" placement="bottom" container="body"></span>

and then, adjust the css of tooltip.

::ng-deep{
  .bs-tooltip-bottom{
    margin-top: 2%;
  }
}

You can also change the placement to "top" and adjust the css of ".bs-tooltip-top" accordingly.

Answer 2

Please try adaptivePosition="false" it may help you.

Not sure but I faced similar issue and it works for me!

All the best!