Arrow placement of a tooltip when inside a popover gets the placement of the popover arrow

[redboul]

Hi

I'm encountering an issue when using a tooltip inside a popover where the tooltip arrow gets the same placement property as the popover one when placement is beyond the standards like bottom-left. See
this plunker for example.

This comes from the method positionArrow in the position.js file that manage the beyond the standards placement. It finds the .tooltip-inner arrow element when positionning the popover arrow...

I did not find any quick fix to contribute sorry

Happens with Angular 1.4.8 and Angular-Bootstrap 1.0.3.

[icfantv]

@redboul, my first reaction is that this is not a configuration we had planned on supporting. That said, per our project documentation, please create a minimally working plunker that shows the issue. Thanks.

[RobJacobs]

I think the query selectors just need to be changed to select direct descendants only,

From:

    var innerElem = elem.querySelector('.tooltip-inner');
    if (!innerElem) {
      isTooltip = false;
      innerElem = elem.querySelector('.popover-inner');
    }
    if (!innerElem) {
      return;
    }

    var arrowElem = isTooltip ? elem.querySelector('.tooltip-arrow') : elem.querySelector('.arrow');
    if (!arrowElem) {
      return;
    }

To:

    var innerElem = elem.querySelector('> .tooltip-inner');
    if (!innerElem) {
      isTooltip = false;
      innerElem = elem.querySelector('> .popover-inner');
    }
    if (!innerElem) {
      return;
    }

    var arrowElem = isTooltip ? elem.querySelector('> .tooltip-arrow') : elem.querySelector('> .arrow');
    if (!arrowElem) {
      return;
    }

[redboul]

@icfantv Thx for the reply, I understand that those placement may not be supported...
I did provide the plunker where a link has a popover and the markup bold word has a tooltip with the arrow at a wrong place.

@RobJacobs I tried your solution to use > .tooltip-inner but the leading > seems to not be supported via default DOM methods (it is supported with jQuery though).

[RobJacobs]

@redboul Sorry, I should have tested that first, this querySelector does the trick:

    var innerElem = elem.querySelector('.tooltip-inner, .popover-inner');
    if (!innerElem) {
      return;
    }

    var isTooltip = angular.element(innerElem).hasClass('tooltip-inner');

    var arrowElem = isTooltip ? elem.querySelector('.tooltip-arrow') : elem.querySelector('.arrow');
    if (!arrowElem) {
      return;
    }

Updated plunk with the fix. I'll put together a PR to address this.

[redboul]

Great, thank you