2016-08-01 16 views
11

Ich möchte einen Tooltipp auf einer Schaltfläche bedingt aktivieren/deaktivieren. Ich habe dies den Sperrzustand zu testen getan:uib-tooltip: Bedingte Tooltip ein- oder ausblenden

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

Aber die Tooltip zeigt. Wie kann ich den Tooltip deaktivieren?

Danke

Antwort

19

können Sie verwenden tooltip-enable="flag" wo flag ein boolescher Wert in Ihrem Controller auf der Grundlage Ihrer Geschäftslogik

gesetzt ist, und hier ist ein Plunker für tool-tip enable/disable

+0

Danke, ist es möglich, einen Tooltip für eine deaktivierte Schaltfläche anzuzeigen? – user1260928

+1

Browser feuern Mausereignisse nicht auf deaktivierten Elementen ab. Eine Umgehung kann jedoch darin bestehen, die Schaltfläche in ein externes div zu packen und Ihre Tooltip-Anweisung in dieses Wrapperdiv einzufügen. Außerdem müssen Sie Ihre deaktivierte Schaltfläche so formatieren, dass ihr Z-Index im deaktivierten Zustand niedriger als dieser Wrapper ist. Ich habe den Plünderer aktualisiert. Ich hoffe es hilft. – Amit

+0

Danke. Ich habe Ihren div/button-Code in meiner Ansicht kopiert, aber wenn die Schaltfläche deaktiviert werden soll, ist sie unsichtbar. – user1260928

0

Was ist das Problem darin ist ? Es wird in den Dokumenten eindeutig mit einem Beispiel angegeben.

Sie sollten tooltip-is-open Flag verwenden.

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>

+0

Ich weiß nicht, in meinem Fall tooltip-enable funktioniert, aber Tooltip-is-open funktioniert nicht. – user1260928

1

Dieses Szenario durchaus nicht übereinstimmt mit dem, was Sie suchen, aber ich fand, dass ich eine Kombination von Tooltip-trigger = „none“ und verwenden benötigen Tooltip-ist -öffnen. Zum Beispiel:

<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> 

Hoffentlich wird es jemandem helfen.

+0

Hat mir geholfen - danke! –