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.

abhim · Accepted Answer · 2017-11-01 08:36:29Z

3

<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'"

answered Nov 1, 2017 at 8:36

abhim

1,1961 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cinnamon Over a year ago

Thanks! Will try that. And why is it so just for trigger but not for the placement?

abhim Over a year ago

I would have to have a look at the running code, to see if any errors are being thrown. You could try removing the tooltip config from the provider. Why are you using angular-tooltips when you're using Angular bootstrap's tooltips? What is the purpose of the custom CSS?

cinnamon Over a year ago

Angular tooltip is used in another place on the page. Also custom CSS is just for design purposes. But may these be the issues? May using both tooltips (angular and bootstrap) and using custom CSS impact that I am not able to set tooltip to be on click?

Collectives™ on Stack Overflow

Making tooltip on click in angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related