Conditional tooltip with Bootstrap 3 and angular

Question

So I can get tooltips to appear on field focus, but I only want them to sometimes. I want to add a manual trigger, but to say the docs are lacking would be to indicate that some exist. Here's what I've found so far (in the source)

// Default hide triggers for each show trigger
var triggerMap = {
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur'
};

...

/**
 * This allows you to extend the set of trigger mappings available. E.g.:
 *
 *   $tooltipProvider.setTriggers( 'openTrigger': 'closeTrigger' );
 */
this.setTriggers = function setTriggers ( triggers ) {
  angular.extend( triggerMap, triggers );
};

So, how do you write one of these triggers?

_"I want to add a manual trigger .."_ - What exactly do you mean? What are you trying to achieve? — Stewie, Jan 17 '14 at 11:56
I only want tooltips when the field has an error. Right now you can trigger on focus, click, etc.... And they talk about a manual trigger. I just want to know how to do that. — boatcoder, Jan 18 '14 at 00:12
I think you want to take a look at this question: [Enable angular-ui tooltip on custom events](http://stackoverflow.com/questions/16651227/enable-angular-ui-tooltip-on-custom-events/16653079#16653079). — Stewie, Jan 18 '14 at 08:44

score 6 · Answer 1 · answered Apr 17 '15 at 09:39

if you are still searching for a solution it might be handy to know that the tooltips only show when there is a text value, otherwise they don't actually show.

I myself use the popover directive, here is a plunker where you can edit your text. When you clear the field, the tooltip won't show.

http://plnkr.co/edit/Zdkyhc90qTZFzLEwtrVL?p=preview

<body ng-controller="MainCtrl">
  <br/><br/>
  <input type="text" size="100" ng-model="error"/><br/><br/>
  <p class="btn btn-default" 
     popover="{{error}}" 
     popover-placement="right" 
     popover-trigger="mouseenter">Hover my error!</p>
</body>

And in the controller you just set the error initial value. Make sure you include 'ui.bootstrap' as a dependency for your app, else it won't work.

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.error = 'Something went wrong';
});

score 1 · Answer 2 · answered Sep 01 '16 at 22:43

AngularJS 1.5.7 and Bootstrap 3.3.6 support uib-tooltip-html properties on input, select and textarea elements. Unlike uib-tooltip properties, uib-tooltip-html properties support expressions. You should be able to express your conditions therein.

For example, here is a date of birth textbox with an expression that either names the field when valid OR explains the validation error:

<input id="dateOfBirth{{::vm.studentID}}"
      name="dateOfBirth"
      placeholder="Date of Birth"
      uib-tooltip-html="myFormName.dateOfBirth.$valid ? 'Date of Birth' : myFormName.dateOfBirth.$error.required ? 'Date of Birth is required' : 'Date of Birth is not a valid date: mm/dd/yyyy'"
      type="date"
      class="form-control"
      data-ng-model="vm.dateOfBirth"
      data-ng-required="vm.editMode"
      min="1920-01-01"
      data-ng-max="vm.maxDateOfBirth"
      tabindex="3" />

With a little more work you could explain the min and max date errors as well.

score 1 · Answer 3 · edited Aug 02 '17 at 15:15

1

<label>
    Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
</label>

Check the tooltip part of the API doc

edited Aug 02 '17 at 15:15

Stéphane Bruckert

21,706
14
92
130

answered Aug 02 '17 at 06:03

Kane

11
1

2

This is a sensible recommendation. But if there is an actual answer inside, then you need to elaborate a little, in order to make that more obvious. E.g. explain what the code fragment achieves and how. As it is now, it is pretty close to being flagged as "not an answer". Also, please take the [tour]. – Yunnosch Aug 02 '17 at 06:08

score 1 · Answer 4 · answered Sep 07 '18 at 11:04

1

we can use popover-enable property to show it conditional

answered Sep 07 '18 at 11:04

Arun

450
3
8

score 0 · Answer 5 · answered May 13 '21 at 07:11

This can be archived through Angular Property binding and the title property of the bootstrap element. In Bootstrap, a tooltip will only show in the DOM if some text was given for the title value. What you have to do is to bind property or method to the tooltip. Here getTooltip() should return either tooltip or empty string.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" [title]="getTooltip()">

Conditional tooltip with Bootstrap 3 and angular

5 Answers5