web-dev-qa-db-ja.com

カスタムイベントで角度UIツールチップを有効にする

特定のフィールドが無効であることをユーザーに示すためにangle-uiのツールチップ機能を使用しようとしていますが、ツールチップはいくつかの事前定義されたトリガーでのみ表示できるようです。これらのトリガー以外のツールチップをトリガーする方法はありますか？

例えば：

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

ここにトリックがあります。

Twitter Bootstrap tooltips （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が$ invalidの場合、tooltip-triggerexpressionは'mouseenter'と評価され、ツールチップが表示されます。それ以外の場合、トリガーは'never'に評価され、代わりにツールチップを起動しません。

編集：

@cotten（コメント）は、ツールチップがスタックし、モデルが有効であっても消えないシナリオについて言及しています。これは、テキストの入力中にマウスが入力フィールド上に留まると発生します（モデルが有効になります）。モデル検証がtrueと評価されるとすぐに、tooltip-triggerは「never」に切り替わります。

UI BootstrapはtriggerMapと呼ばれるものを使用して、ツールチップを表示/非表示するマウスイベントを決定します。

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

ご覧のとおり、このマップは「never」イベントについて何も認識していないため、いつツールチップを閉じるかを判断できません。したがって、トリックプレイをうまく行うには、独自のイベントペアでこのマップを更新するだけでよく、UI Bootstrapはtooltip-triggerが「never」に設定します。

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"モジュールによって公開され、アプリ構成でツールヒントをグローバルに構成できます。

108
Stewie

私は別のものを試しました

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

この方法では、入力が無効な場合にのみツールチップに何かが書き込まれ、何も書き込まれていない場合、ツールチップは表示されません。

32
Victor Ivens

バージョン0.12.0以降、tooltip-tiggerは観察できなくなりました（したがって、プログラムで変更することはできません）。

tooltip-enableを使用して同じ動作を取得できます。詳細はこちらをご覧ください： https://github.com/angular-ui/bootstrap/issues/3372

9
Bruno

フィールドにtooltip-enableの代わりにtooltip-triggerを追加することもできます。

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

この場合、ユーザー名が無効な場合（$ invalidはtrueを返します）、ツールチップが表示されます。

3
Salma Hamed

新しいバージョンのドキュメントに従って、以下の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"のフォーム名のみを置き換えます

準備できた。

0
nirmal