uib-tooltip：有條件地顯示或隱藏工具提示

我想有條件地啓用/禁用按鈕上的工具提示。我做這個測試的禁止狀態：uib-tooltip：有條件地顯示或隱藏工具提示

<button type="button" 
    uib-tooltip="test" tooltip-is-open="false"> 
</button>

但提示節目。如何禁用工具提示？

謝謝

來源

2016-08-01 user1260928

您可以使用tooltip-enable="flag"其中flag是在控制器中設置一個布爾值，根據你的業務邏輯

這裏是tool-tip enable/disable

來源

2016-08-01 08:23:33 Amit

謝謝，是否有可能在禁用的按鈕上顯示工具提示？ – user1260928

瀏覽器不會在禁用的元素上觸發鼠標事件，但是一種解決方法是將您的按鈕封裝在外部div中，並將您的tooltip指令放在此封裝器div上。您還需要設置禁用按鈕的樣式，以使其z-index低於此包裝，處於禁用狀態。我已經更新了重拳。希望能幫助到你。 – Amit

謝謝。我在視圖中複製了你的div/button代碼，但是當按鈕應該被禁用時，它是不可見的。 – user1260928

一個plunker什麼問題，它？在文檔中清楚地給出了一個例子。

您應該使用tooltip-is-open標誌。

var app = angular.module("sa", ["ui.bootstrap"]); 
 

 
app.controller("FooController", function($scope) { 
 

 
    $scope.tooltipState = false; 
 

 
    $scope.toggleTooltip = function() { 
 
    $scope.tooltipState = !$scope.tooltipState; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 

 
<div ng-app="sa" ng-controller="FooController"> 
 

 
    <button class="btn btn-primary" type="button" uib-tooltip="Hello!" tooltip-placement="right" tooltip-is-open="tooltipState">I'll have a tooltip 
 
    </button> 
 
    <br> 
 

 
    <br> 
 
    <a href="" ng-click="toggleTooltip()">Toggle tooltip</a> 
 
    <br> 
 
    <a href="" ng-click="tooltipState = !tooltipState">Toggle tooltip without scope method</a> 
 
</div>

來源

2016-08-01 08:35:45

我不知道，在我的情況下，tooltip-enable的作品，但tooltip-is-open不是。 – user1260928

這種情況不完全匹配了你在找什麼，但是我發現我需要使用的工具提示觸發=「none」和組合工具提示是-打開。例如：

<form name="formName"> 
    <input name="inputName" type="text" required uib-tooltip="Required*" tooltip-placement="left" tooltip-trigger="none" tooltip-is-open="formName.inputName.$touched && formName.inputName.$invalid" /> 
</form>

希望它能幫助別人。

來源

2017-04-05 23:03:16

幫助我 - 謝謝！ –

uib-tooltip：有條件地顯示或隱藏工具提示

回答

相關問題