Tooltip flickering on hover

On hovering the tooltip appears to be flickering and does not appear. On adding

 .tooltip { pointer-events: none; }

to styles.scss , as suggested here, the tooltip finally shows but the position of the tooltip is shifted by some pixels.

My code is as followsHTML

<div *ngIf="control === 'qText'" class="col-md-1 table-responsive table-borderless px-0" style="display: inline-block;">
    <table class="table tooltip-button">
      <tr>
        <td>
            <div id="toolbar-div" class="text-left" style="display:inline-block" container="body">
                <button
                  id="showToolbar"
                  color="default"
                  outline="false"
                  size="sm"
                  class="m-0 tocapitalize"
                  type="button"
                  mdbTooltip="Show Toolbar" placement="top"
                  (click)="toggleToolbar()"
                >
                  <mdb-icon fas icon="pen" class="mr-1 fa-sm"></mdb-icon>
                </button>
              </div>
        </td>
      </tr>
      <tr>
        <td>
            <div id="duplicates-div" class="text-left" style="display:inline-block">
                <button
                container="body"
                  id="show-duplicates"
                  color="default"
                  outline="false"
                  size="sm"
                  class="m-0 tocapitalize"
                  type="button"
                   mdbTooltip="Show Toolbar" placement="left"
                  (click)="showDuplicates()"
                >
                  <mdb-icon fas icon="clone" class="mr-1 fa-sm"></mdb-icon>
                </button>
              </div>
        </td>
      </tr>
    </table>
  </div>