Angular 9+ and ng-bootstrap Tooltip fails on fixed elements when a page is scrolled, is there a better hack than mine to fix?

user_1265302 0
Viewed 2192

I believe this to be a bug in ng-bootstrap and has been reported and unfortunately there is no information on a fix coming.

I'll add the component html here but my demo of the issue is more useful.

<p>Hover over box 1 for a tooltip and then scroll</p>
<div *ngFor="let item of [].constructor(lineCount); let i = index">{{i}}</div>
<ul 
    class="lhsMenuWrapper show">
    <li
        class='lhsMenuWrapper-item common buttonTop'
        ngbTooltip="Box 1"
        placement="right">
        <h1>1</h1>
    </li>
</ul>
<div 
  class='common buttonTwo'
  ngbTooltip="Box 2"
  placement="right">
  <h1>2</h1>
</div>

GIF of tooltip fail on position:fixed elements

enter image description here

My hack overrides the tooltip's position attribute with fixed, then makes sure its top and left is positioned correctly and the width:100% makes sure the tip is displayed without an early newline (could be improved).

I'm not a fan of this as I don't know the knock on effects, has anyone else come up with a better fix?

.show {
    position: fixed!important;
    top: 0px;
    left: 0px;
    width: 100%;
}

Hack demo

ng-bootstrap angular tooltip
3 Answers

I had this same issue, and ended up putting an outer wrapper around the element with a position: relative. This seemed to fix the problem.

i.e.

.sidebar {position: fixed;}
.tooltip-wrapper {position: relative;}
<div class="sidebar">
  <nav>
    <div *ngFor="let item of menuItems" class="tooltip-wrapper">
      <div class="side-nav-item" placement="bottom" ngbTooltip="{{item.tooltip}}">
        <div class="sidebar-icon">
          <i class="{{item.icon}}"></i>
        </div>
        <div class="sidebar-title">
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
  </nav>
</div>

user_21622980

I put the parent element like relative element and now it's working.

Code picture

user_176080380

if you use a table just put style="position: relative" in your td

 <td [ngClass]="{'not-expected-value': row.car== null}" style="position: relative">
     <div class="ui-grid-cell-contents dark_backgrd" ngbTooltip="{{row.car?.libelle}}" placement="right">
        <b>{{row.car?.code}}</b>
     </div>
 </td>
user_52966830
Related