Tooltip flickering on hover

Topic: Tooltip flickering on hover

anuragd7 free asked 4 years ago

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>

Arkadiusz Idzikowski staff commented 4 years ago

Thanks, we will take a closer look at that. Which browser type and version do you use?

anuragd7 free commented 4 years ago

I am using chrome version 77.0.3865.90

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=58931" target="_blank" rel="nofollow">@anuragd7</a></p>

<p>use <code>container="body"</code> and <code>[dynamicPosition="false"</code> and it will work:</p>

<p>Hope it helps!</p>

<p>Best Regards, Bartosz.</p>

Please insert min. 20 characters.

Dear @anuragd7

use container="body" and [dynamicPosition="false" and it will work:

<div
  class="col-md-1 table-responsive table-borderless px-0"
  style="display: inline-block;border: 1px solid black"
>
  <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"
            container="body" <-----------------------------
            [dynamicPosition]="false" <-----------------------------
            (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"
            container="body" <-----------------------------
            [dynamicPosition]="false" <-----------------------------
            mdbTooltip="Show Toolbar"
            placement="right"
            (click)="showDuplicates()"
          >
            <mdb-icon fas icon="clone" class="mr-1 fa-sm"></mdb-icon>
          </button>
        </div>
      </td>
    </tr>
  </table>
</div>

Hope it helps!

Best Regards, Bartosz.

anuragd7 free commented 4 years ago

Thanks so much @Bartosz Termena. I can confirm that after adding [dynamicPosition]="false" the tooltip appears correctly.

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=58931" target="_blank" rel="nofollow">@anuragd7</a></p>

<p>Try to add <code>container="body"</code> to your <code>tooltips</code>, like below:</p>

<p>Hope it helps!</p>

<p>Best Regards, Bartosz.</p>

Please insert min. 20 characters.

Dear @anuragd7

Try to add container="body" to your tooltips, like below:

<div
  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">
          <button
            id="showToolbar"
            color="default"
            outline="false"
            size="sm"
            class="m-0 tocapitalize"
            type="button"
            mdbTooltip="Show Toolbar"
            placement="top"
            container="body"
          >
            <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"
          >
            <mdb-icon fas icon="clone" class="mr-1 fa-sm"></mdb-icon>
          </button>
        </div>
      </td>
    </tr>
  </table>
</div>

Hope it helps!

Best Regards, Bartosz.

anuragd7 free commented 4 years ago

Hi @Bartosz TermenaTried adding container="body". Unfortunately the behavior is still the same. i.e. the tooltip appears but it is shifted by a few pixels so it appears over the wrong area.

Bartosz Termena staff commented 4 years ago

We will take a closer look at that tooltip problem. I will inform you when we manage to fix it.

Best Regards, Bartosz.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.3.0
Device: mac
Browser: chrome
OS: OSX
Provided sample code: Yes
Provided link: Yes

anuragd7

120Support score
18Questions 3Answers 0Snippets