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?

Answer 1

we can use popover-enable property to show it conditional

Answer 2

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.