57

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

例えば：

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

5 に答える 5

108

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

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が $invalid の場合、式tooltip-triggerは に評価され'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」モジュールによって公開され、アプリ構成でツールチップをグローバルに構成できます。

于 2013-05-20T15:38:13.873 に答える
1

新しいバージョンのドキュメントに従って、以下の 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"

準備できた。

于 2016-10-17T09:05:38.017 に答える