Tooltip over table header or cell misbehavior

Bug description:

When hovering with the mouse cursor over table header/cell with tooltips, an empty cell is created on the right hand side of the header/cell.

Link to minimally-working plunker that reproduces the issue:

https://stackblitz.com/edit/angular-bf9pdg

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.1.1

ng-bootstrap: 2.2.2

Bootstrap: 4.1.3

1 possible answer(s) on “Tooltip over table header or cell misbehavior

  1. tl;dr; use the container="body" https://stackblitz.com/edit/angular-bf9pdg-qkarkm?file=app/tooltip-basic.html

    Explanation: HTML spec limits types of elements that can be inserted between table rows / cell elements. The tooltip directive inserts the <ngb-tooltip-window> elements as a sibiling of a host element (<th> in your case) and this is not allowed by HTML spec and browser implementation. This is the source of misbehaviour.

    The container="body" option changes the default behaviour of the tooltip directive and inserts <ngb-tooltip-window> element as a last child of the <body> element hence avoiding HTML issues.

    Going to close this one as a support request since there is nothing we can do with default options and we’ve got the dedicated container="body" option to deal with those kind of situations.