单击任何其他工具提示时，将禁用打开的uib-tooltip

Question

I am trying to create 3 tooltips in a page, Its not working , only one tooltip should be open on click anyother tooltip should be closed.

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
$scope.tooltip = {
            1: false,
            2: false,
            3: false
        };

$scope.tooltipCloseActive = function(activeTooltip) {
            console.log($scope.tooltip);

            _.set($scope.tooltip, activeTooltip, true);
            _.forOwn($scope.tooltip, function(value, key) {
                console.log(value+'*************'+key);
                if(activeTooltip !== key && value === true){
                    console.log('#'+key);
                    _.set($scope.tooltip, key, false);
                    $scope.triggerClickOnTooltip(key);
                    console.log(key);
                }
            });
        };

        $scope.triggerClickOnTooltip = function(id) {
            setTimeout( function(){

                angular.element(document.querySelectorAll('#'+id)).trigger('click');
            }, 100);
        };


});

HTML:

<div class="col-xs-10 col-sm-4">

                <p id="1" tooltip-trigger="click"
                   uib-tooltip="I am a tooltip 1." ng-click="tooltipCloseActive('1');">

                    <span>tooltip 1:</span>
                </p>
         <br>
                <p id="2"   tooltip-trigger="click"
                   uib-tooltip="I am a tooltip 2." ng-click="tooltipCloseActive('2')">

                    <span >tooltip 2:</span>
                </p>
        <br>
                <p id="3" tooltip-trigger="click"
                   uib-tooltip="I am a tooltip 3." ng-click="tooltipCloseActive('3')">

                    <span>tooltip 3:</span>
                </p>
       <br>
            </div>

I have written code for multiple ui tooltips and want to close other tooltips when one of the tooltip is clicked.

It is going into infinite loop so when I am triggering click .

Just want to know how to make it work :

Possible Solution : 1) Differentiating the user click and trigger click : I was not able to differentiate (I know how we can do in jquery but not in angular)

2) Use tooltip flags ( which I did it didn't work)

3) Upgrading ui bootstrap and use outsideClick (Which I cant afford doing in our application right now)

Is there any way I can solve this mystery of enable only one tooltip at a time.

Any help would be greatly appreciated.

PLUNKER : http://plnkr.co/edit/mjqGa26auDSY2G8ThAk4?p=preview

Answer 1

I think I was over thinking on trigger :

I have used is-open with wrong format due to which I was not able to get the

Working plunker using mutliple tooltips and enabling using tooltip-is-open http://plnkr.co/edit/gKqdoA3qK74XD1r9b5PR?p=info

HTML:

Tooltip Text

  <br/> Toggle value: {{ tooltip.isTTOpen }}
</div>
<br/>
<br/>
<br/>
<br/>
<span tooltip-template="'myTooltipTemplate.html'" tooltip-trigger="none" tooltip-is-open="tooltip.isTTOpen2" tooltip-placement="top" ng-click="closeTooltip('isTTOpen2')">Tooltip Text</span>

<br/> Toggle value: {{ tooltip.isTTOpen2 }}
<br/>
<br/>
<br/>
<br/>
<span tooltip-template="'myTooltipTemplate.html'" tooltip-trigger="none" tooltip-is-open="tooltip.isTTOpen3" tooltip-placement="top" ng-click="closeTooltip('isTTOpen3')">Tooltip Text</span>

<br/> Toggle value: {{ tooltip.isTTOpen3 }}

JS:

$scope.tooltip = {
    isTTOpen: false,
    isTTOpen2: false,
    isTTOpen3: false
  };

  $scope.closeTooltip = function(tooltip) {
    console.log(tooltip);
    for (var key in $scope.tooltip) {
      if ($scope.tooltip.hasOwnProperty(key)) {
        console.log(key + " -> " + $scope.tooltip[key]);
        if (tooltip === key) {
          $scope.tooltip[key] = true;
        } else {
          $scope.tooltip[key] = false;
        }
      }
    }
  };