Ausblenden angular-ui-tooltip benutzerdefiniertes Ereignis

Ich habe auf der Suche um und versuchen, verschiedene Dinge, aber es kann nicht herausfinden. Ist es möglich zu verstecken, ein angular-ui-tooltip mit einem bestimmten Ereignis?

Was ich will zu tun ist, um eine QuickInfo einblenden, wenn jemand mit der Maus über ein div-Element, und schließen Sie es, wenn ein Benutzer darauf klickt, weil ich die show wird ein weiteres popup. Ich versuchte es mit custom trigger-Ereignissen kann aber nicht scheinen, um es zu erhalten arbeitend. Ich habe dieses:

<div ng-app="someApp" ng-controller="MainCtrl" class="likes" tooltip="show favorites"     tooltip-trigger="{{{true: 'mouseenter', false: 'hideonclick'}[showTooltip]}}" ng-click="doSomething()">{{likes}}</div>

var app = angular.module('someApp', ['ui.bootstrap']);

app.config(['$tooltipProvider', function($tooltipProvider){
 $tooltipProvider.setTriggers({
  'mouseenter': 'mouseleave',
  'click': 'click',
  'focus': 'blur',
  'hideonclick': 'click'
 });
}]);

app.controller('MainCtrl', function ($scope) {
 $scope.showTooltip = true;
 $scope.likes = 999;

 $scope.doSomething = function(){
    //hide the tooltip
    $scope.showTooltip = false;                                   
 };

})

http://jsfiddle.net/3ywMd/

Der tooltip ist zu schließen, auf die erste klicken und nicht die 2. Keine Idee, wie schließen Sie die QuickInfo angezeigt, wenn Benutzer klickt auf div?

Sie können ändern Sie einfach die tooltipProvider trigger-Karte enthalten 'mouseenter': 'mouseleave click'. Siehe: stackoverflow.com/a/23388638/1455709

InformationsquelleAutor Mikel Porras Hoogland | 2013-11-01

6

Habe ich versucht @shidhin-cr Vorschlag der Einstellung $scope.tt_isOpen = false aber Sie hatte die ziemlich bedeutende Problem, dass der tooltip nicht ausblenden, es ist noch in den DOM (und der Umgang mit pointer-events!). So, obwohl Sie es nicht sehen können, wird in der QuickInfo können verhindern, dass Benutzer die Interaktion mit Inhalten, die zuvor hinter den tooltip.

Einen besseren Weg, die ich gefunden habe war einfach der das Ereignis ausgelöst tooltip-trigger auf den tooltip target. So, zum Beispiel, wenn Sie haben eine Schaltfläche, einen tooltip target und Trigger on click...
```
<button id="myButton"
        tooltip="hi"
        tooltip-trigger="click">
</button>
```
Dann in deinem JavaScript -, an jeder Stelle, die Sie auslösen können, die "click" - Ereignis zu verwerfen, Ihrem tooltip. Stellen Sie sicher, dass der tooltip ist eigentlich offen, bevor Sie das Ereignis auszulösen.
```
//... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
    angular.element('#myButton').trigger('click');
}
```
Da dies löst den tatsächlichen Interna der AngularUI die Tooltip-Richtlinie, haben Sie sich nicht die fiesen Nebenwirkungen von der vorherigen Lösung.

InformationsquelleAutor Michael Cook
4

Grundsätzlich kann man nicht spielen mit der tooltip-trigger um diese Arbeit zu machen. Nach dem Graben durch die ToolTip-Richtlinie code, fand ich, dass das ToolTip-Attribut stellt eine scope-Attribut namens tt_isOpen.

So, in Ihrer ng-click Funktion, wenn Sie dieses Attribut auf false festgelegt, wird die QuickInfo auszublenden.

Finden Sie die aktualisierte demo hier

http://jsfiddle.net/3ywMd/10/

Wie diese
```
app.controller('MainCtrl', function ($scope) {
 $scope.likes = 999;
 $scope.doSomething = function(){
    //hide the tooltip
    $scope.tt_isOpen = false;
 };                                    
})
```
Vielen Dank, scheint zu funktionieren!
danke. es funktioniert perfekt.
In diesem Beispiel: Warum hat die .controller sitzen AUßERHALB des var app = angular.Modul('someApp', ['ui.bootstrap']); ?

InformationsquelleAutor Shidhin Cr
4

Michael ' s Lösung hat mich 90% der Weg dorthin, aber wenn ich es ausgeführt, der code, eckig antworteten mit "$digest "bereits im Gange". Ich habe einfach gewickelt, die trigger eine Zeitüberschreitung auf. Wahrscheinlich nicht die beste Lösung, aber erforderlich, minimaler code
```
//... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('#myButton').scope().tt_isOpen) {
    $timeout( function(){
        angular.element('#myButton').trigger('click');
    }, 100);
}
```
InformationsquelleAutor liteflier
1

Für die Zukunft, die akzeptierten Antworten angular.element('.yourTooltip').scope().tt_isOpen wird nicht funktionieren in den neuen Versionen, wie der tooltip wurde aus nicht beobachtbar. Daher ist die gesamte tootlip entfernt vom DOM. Einfache Lösung ist einfach zu überprüfen, ob der tooltip ist in DOM-oder nicht.

Kreditaufnahme von @liteflier Antwort,
```
//... meanwhile, in JavaScript land, in your custom event handler...
if (angular.element('.yourTooltip').length) { //if element is present in DOM
    setTimeout( function(){
        //Trigger click on tooltip container
        angular.element('.yourTooltipParent').trigger('click');
    }, 100);
}
```
InformationsquelleAutor RijulB

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.