Условная подсказка с Bootstrap 3 и angular

Итак, я могу заставить всплывающие подсказки появляться на полевом фокусе, но иногда я хочу их. Я хочу добавить ручной триггер, но сказать, что недостает документов, было бы указание на то, что некоторые из них существуют. Вот что я нашел до сих пор (в источнике)

// 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 );
};

Итак, как вы пишете один из этих триггеров?

Ответы

Ответ 1

если вы все еще ищете решение, может быть полезно знать, что всплывающие подсказки отображаются только при текстовом значении, в противном случае они фактически не отображаются.

Я сам использую директиву popover, вот плункер, где вы можете редактировать свой текст. Когда вы очищаете поле, всплывающая подсказка не будет отображаться.

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>

И в контроллере вы просто установите начальное значение ошибки. Убедитесь, что вы включили "ui.bootstrap" в качестве зависимости для своего приложения, иначе он не будет работать.

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

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

Ответ 2

AngularJS 1.5.7 и Bootstrap 3.3.6 поддерживают свойства uib-tooltip-html для элементов ввода, выбора и textarea. В отличие от свойств uib-tooltip, свойства uib-tooltip-html поддерживают выражения. Вы должны быть в состоянии выразить свои условия.

Например, вот текстовое поле даты рождения с выражением, которое либо называет поле, когда оно действительное, либо объясняет ошибку проверки:

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

Ответ 3

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

Проверьте часть всплывающей подсказки API doc