Включить подсказку angular -ui для пользовательских событий

Я пытаюсь использовать функциональность angular -ui tooltip, чтобы показать моему пользователю, что определенное поле недействительно, но кажется, что всплывающая подсказка может отображаться только на некоторых заранее определенных триггерах. Есть ли способ, с помощью которого я могу запускать всплывающую подсказку, кроме этих триггеров?

Например:

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-trigger="myForm.username.$invalid">

Ответ 1

Вот трюк.

Twitter подсказки Bootstrap (для Angular -UI) есть возможность указать событие триггера с дополнительным атрибутом, как в data-trigger="mouseenter". Это дает вам возможность программным образом сменить триггер (с помощью Angular):

<input 
  ng-model="user.username"
  name="username"
  tooltip="Some text" 
  tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}" 
/>

Поэтому, когда username недействителен в $, выражение tooltip-trigger будет оцениваться как 'mouseenter', и появится всплывающая подсказка. В противном случае триггер будет оценивать значение 'never', которое в свою очередь не запускает всплывающую подсказку.

EDIT:

@cotten (в комментариях) упоминает сценарий, в котором всплывающая подсказка застревает и не исчезнет, даже если модель действительна. Это происходит, когда мышь остается над полем ввода во время ввода текста (и модель становится действительной). Как только проверка модели оценит значение true, tooltip-trigger переключится на "никогда" .

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

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

Как вы можете видеть, эта карта ничего не знает о событии "никогда" , поэтому она не может определить, когда закрыть всплывающую подсказку. Итак, чтобы разглядеть трюк, нам нужно только обновить эту карту с помощью нашей собственной пары событий, а UI Bootstrap затем узнает, какое событие наблюдать за закрытием всплывающей подсказки, когда tooltip-trigger установлено как "никогда" .

app.config(['$tooltipProvider', function($tooltipProvider){
  $tooltipProvider.setTriggers({
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur',
    'never': 'mouseleave' // <- This ensures the tooltip will go away on mouseleave
  });
}]);

PLUNKER

_{Примечание. $tooltip-провайдер выставляется модулем "ui.bootstrap.tooltip", и он позволяет нам глобально настраивать всплывающие подсказки в конфигурации приложения.}

Ответ 2

Я попробовал что-то другое

tooltip="{{(myForm.input1id.$invalid) ? 'You have an error with this field' : ''}}"

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

Ответ 3

Начиная с версии 0.12.0, tooltip-tigger перестает наблюдаться (поэтому вы не можете его программно изменить).

Вы можете использовать tooltip-enable для получения того же поведения. Подробнее здесь: https://github.com/angular-ui/bootstrap/issues/3372

Ответ 4

Вы также можете добавить tooltip-enable вместо tooltip-trigger в свое поле.

<input
    type="text"
    tooltip="Invalid name!"
    tooltip-position="right"
    tooltip-enable="{{myForm.username.$invalid}}">

В этом случае, если имя пользователя недопустимо ($ invalid returns true), появится всплывающая подсказка.

Ответ 5

В соответствии с документом новой версии я предлагаю использовать ниже HTML. Ответ на stewie не поможет с последней версией.

<input class="form-control" name="name" type="text" required ng-model="name"
                   uib-tooltip="name required" tooltip-is-open="formname.name.$invalid" 
tooltip-trigger="none" tooltip-placement="auto top" />

Замените только имя своей формы в tooltip-is-open="formname.name.$invalid"

вам хорошо идти.