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.
