Tooltip offset inside scrollable container #1974

Closed
howlettt opened this Issue Feb 1, 2017 · 3 comments

Projects

None yet

2 participants

@howlettt
Contributor
howlettt commented Feb 1, 2017

I'm submitting a ...

[ x ] bug report

Plunkr Case
http://plnkr.co/edit/aQIi0ruvExGtVvthALPN?p=preview

Current behavior
When a tooltip is inside a element other than the body which is scrollable, the tooltip is displayed below it's source element by the amount the container has scrolled

Expected behavior
Tooltip show be displayed beside it's source element and not affected by the scrolling of it's container element.

Minimal reproduction of the problem with instructions

  1. Create a container element with the following styles & class
    style="overflow: auto; max-height: 150px;" class="scroll-container"
  2. Add a lot of text to the element to make it scroll
  3. Add the following tooltip after the text
    <span pTooltip="content" [appendTo]="scrollContainer">Hover over me</span>
  4. Add the following code to the component
    protected scrollContainer: Element;
    constructor() { setTimeout(() => { this.scrollContainer = document.querySelector('.scroll-container'); }) }
@cagataycivici
Member

There are other problems with scrollable containers and tooltip like misalignment after scrolling. For example, first shod the tooltip and then scroll resulting it disconnection of tooltip and target. We've added an initial workaround and documented it for tomorrow's RC3 release which is a good starting point.

@cagataycivici cagataycivici self-assigned this Feb 1, 2017
@cagataycivici cagataycivici added this to the 2.0-RC3 milestone Feb 1, 2017
@cagataycivici cagataycivici added a commit that closed this issue Feb 1, 2017
@cagataycivici cagataycivici Fixed #1974 138e9b8
@cagataycivici
Member

From docs;

When placed inside a scrolling container like an overflown div, tooltip must be appended to another element that has relative positioning instead of document body which is the default.

<div #container style="inline-block;position:relative">
    <input type="text" pInputText pTooltip="Enter your username" placeholder="Right" [appendTo]="container">
</div>
@howlettt
Contributor
howlettt commented Feb 2, 2017

Can't seem to get this workaround to work, see my Plunker below. I have a textbox with a tooltip in a position relative scrollable div. Am I missing something?

http://plnkr.co/edit/JehIw2NaPHDH3F09bOzg?p=preview

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment