在自定義事件上啓用angular-ui工具提示

我正嘗試使用angular-ui的工具提示功能向我的用戶顯示特定字段無效，但似乎只能在某些預定義的觸發器上顯示工具提示。除了那些觸發器，我可以通過哪些方式觸發工具提示？在自定義事件上啓用angular-ui工具提示

例如：

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

來源

2013-05-20 vivek

[QuantumUI tooltip]（http://angularui.net/）** angularui.net **有一些更靈活的選項。 –

107

這裏有一個竅門。

Twitter Bootstrap tooltips（即Angular-UI依賴於）可以選擇使用附加屬性指定觸發事件，如data-trigger="mouseenter"。這使您（角）編程改變的是觸發的一種方式：

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

所以當username爲$無效，tooltip-trigger表達式會'mouseenter'和工具提示會顯示出來。否則，觸發器將評估爲'never'，作爲回報，它不會觸發工具提示。

編輯：

@cotten（在評論）提到一種情況，提示卡並不會消失，即使模型是有效的。當輸入文本時（和模型有效），鼠標停留在輸入字段上時會發生這種情況。只要模型驗證評估爲真，tooltip-trigger將切換到「從不」。

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

_{注：$提示供應商由「ui.bootstrap.tooltip」模塊外露，它可以讓我們在全球範圍內配置我們提示在應用程序的配置。}

來源

2013-05-20 15:38:13 Stewie

應該接受這個答案，並將實例添加到工具提示詳細信息頁面。 – vittore

我無法得到這個工作。請參閱：http://jsbin.com/ekeset/1/edit。當表單有效時，工具提示不會消失... – Cotten

以下是一個工作版本：http://jsbin.com/ekeset/2/edit – Stewie

我嘗試不同的東西

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

這樣一來，我的提示，只有當輸入無效已經寫的東西，如果它沒有任何書面的提示不顯示。

來源

2014-05-29 14:48:56

如果將它與正確的彈出式觸發器事件配對，則此功能非常有效。例如，我正在對文本輸入進行驗證，所以即使這樣Keyup也會強制彈出窗口重新評估每個關鍵事件。我首先嚐試了'重點'，但是隻有當我點擊了，然後才進入元素，錯誤信息才顯示出來。 '''input type =「text」class =「form-control」id =「tax_id」name =「tax_id」ng-maxlength =「9」ng-minlength =「9」ng-model =「taxId」popover =「{{（newApplication.tax_id。$ error.maxlength）？'請輸入一個9位數字'：''}}」popover-trigger =「keyup」required>''' – nomis

從版本0.12.0開始，tooltip-tigger不再可觀察（因此您無法以編程方式更改它）。

您可以使用tooltip-enable來獲得相同的行爲。在此處查看更多詳細信息：https://github.com/angular-ui/bootstrap/issues/3372

來源

2015-03-10 17:14:48 Bruno

您還可以在您的字段中添加tooltip-enable而不是tooltip-trigger。

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

在這種情況下，如果用戶名無效（$無效退貨true）的提示將會出現。

來源

2016-07-13 09:13:21

這樣簡單得多，比接受的答案還要接近OP的原始代碼 – daniero

根據新版本文檔，我會建議在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-17 09:05:38 nirmal

在自定義事件上啓用angular-ui工具提示

回答

相關問題