Display Tooltip only when if statement is reached

Question

I have around 3 different tooltips in the same view, but I am having some issues with that. I am using AngularStrap

I have this if into a function

      if (index === 1) {

          $timeout(function() {
            $scope.tooltip = {
              title: '<strong>You have to add risk/win</strong>'
            };
          }, 3000);

      }

all I need is that when the if statement is successfully call, then that tooltip should be display for 3 seconds and then disappear.

This is how I have the HTML

   <input ng-model="slip.risk"
          ng-change="riskWinCalculations2(slip, 'RISKIFBET', $index)"
          data-title="{{tooltip.title}}"
          data-html="true"
          bs-tooltip=""
          data-placement="top">

the weird thing is that when I do hover on this input, the other tooltips appears and I don't want that.

Just to let you know, here is another tooltip

   <div data-title="{{tooltip.title}}"
        data-content="{{tooltip.content}}"
        data-html="true"
        bs-tooltip=""
        ng-mouseover="openMoreInfoSlip(slip)"
        data-placement="left">

so what suggestions do you have ?

Answer 1

Use this inside your if condition:

$timeout(function(){
    var target = angular.element(document.getElementById('div1'));
    var myTooltip = $tooltip(target, {
        title:'tip!!', trigger:'manual', placement:'top'
    });
    myTooltip.$promise.then(function() {
        myTooltip.show();
    });
}, 1500);