Making tooltip on click in angularjs

Question

I am struggling with making tooltip on click in angularjs.

this is what I have now bus it is still working on hover:

JS module:

.config(['$uibTooltipProvider', function($uibTooltipProvider){
  $uibTooltipProvider.setTriggers({
    'click': 'click',
  });
  $uibTooltipProvider.options({
    'placement': 'right'
  });
}])

(I think the module is set correctly since placement part works and reacts to the changes in JS file).

HTML:

<div>
    <i class="fa fa-info-circle fa-lg" style="color:#26a6d1"
       uib-tooltip="tooltip text" tooltip-placement="right"
       tooltip-trigger="click"
       >
    </i>
</div>

CSS:

.tooltip > .tooltip-arrow {
 visibility: visible;
  border-right-color: #26a6d1;
}

.tooltip > .tooltip-inner {
  visibility: visible;
  border: 2px solid #26a6d1;
  background-color:white;
  font-weight: normal;
  color:  black;
}

.tooltip {
    visibility: visible;
    position: relative;
    display: inline-block;
}


.tooltip .tooltiptext {
    visibility: hidden;
    border: 2px solid #26a6d1;
    width: 120px;
    background-color: white;
    color: black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
}

.tooltip:hover .tooltiptext { //this part is for another tooltip (simple one, working on hove)
    visibility: visible;
}

and bower.json:

{
  "name": "whatever",
  "private": true,
  "dependencies": {
    "angular": "1.5.8",
    "angular-messages": "1.5.8",
    "angular-sanitize": "1.5.8",
    "angular-animate": "1.5.8",
    "angular-recaptcha": "2.5.0",
    "angular-ui-router": "0.2.18",
    "angular-selectize2": "3.0.1",
    "moment-picker": "0.5.6",
    "angular-scroll": "1.0.0",
    "angular-flash-alert": "2.3.0",
    "angular-translate": "2.11.1",
    "angular-elastic": "2.5.1",
    "angular-tooltips": "1.1.6",
    "jquery": "2.2.0",
    "accounting.js": "0.4.1",
    "moment": "2.14.1",
    "moment-timezone": "0.5.5",
    "ng-dialog": "0.6.2",
    "es6-shim": "0.35.0",
    "angular-bootstrap": "latest",
    "bootstrap": "3.3.5"
  },
  "resolutions": {
    "angular": "1.5.8",
    "moment": "2.14.1",
    "moment-timezone": "0.5.5"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "overrides": {
    "moment": {
      "main": [
        "min/moment.min.js",
        "locale/lt.js"
      ]
    }
  },
  "devDependencies": {
    "angular-bootstrap": "^2.5.0"
  }
}

I tried updating bootstrap, changing parts of html but nothing seems to be working.

Answer 1

<div>
    <i class="fa fa-info-circle fa-lg" style="color:#26a6d1"
       uib-tooltip="tooltip text" tooltip-placement="right"
       tooltip-trigger="'click'"
       >
    </i>
</div>

The attribute value click is supposed to be under inverted commas: tooltip-trigger="'click'"