Popover/tooltip positioning with text overflow container

[peterreisz]

In html tables if you want to add a tooltip/popover for a long cell (with overflow: hidden option) the UIB using the whole content for positioning the tooltip/popover. The result is the tooltip/popover seems to be on a different cell or not in the middle of the actual cell of the html table.

See the example here: http://plnkr.co/edit/UUyCbS2EfN62Z1QsLhXO?p=preview
Hover on the first cell.

Versions:

Angular: 1.5.5
UIBS: 1.3.2
Bootstrap: 3.3.6

I've needed a fast runtime patch for my project, so I used the following decorator, it might be useful.

$provide.decorator('$uibPosition', function($delegate) {

    var orgPositionElements = $delegate.positionElements;

    $delegate.positionElements = function(hostElem, targetElem, placement, appendToBody) {
        var originalPosition = orgPositionElements.call($delegate, hostElem, targetElem, placement, appendToBody);
        var parent = hostElem.parent()[0];
        if ((hostElem.attr('uib-popover') || hostElem.attr('uib-tooltip'))
                && hostElem.parent()[0].tagName == 'TD' && parent.scrollWidth > parent.clientWidth) {
            var newPosition = orgPositionElements.call($delegate, hostElem.parent(), targetElem, placement, appendToBody);
            newPosition.top = originalPosition.top;

            return newPosition;
        }

        return originalPosition;
    }

    return $delegate;
})

[icfantv]

@peterreisz i'm sorry. is this a bug?

[peterreisz]

It might be.

You can see my issue better if the text is very long in the cell:

I'd expect this:

Now I can achieve only similar with tooltip on the td and append-to-body:

If you don't want to support situations for positioning only for the visible part, then close this issue.

[icfantv]

@RobJacobs you have a thought on this?

[wesleycho]

This looks like a user issue - with a slight modification, I was able to get this to work here.

Closing as a non-issue.