Uib Tooltip sollte erscheinen, während die Maus darüber geht

Question

Ich benutze Uib Tooltip, und wollte Tooltip zeigen während Maus über auf Tooltip. Gibt es eine Problemumgehung?

Vielen Dank im Voraus.

Answer 1

Dies ist der Code, den ich in einem component verwende, der ein Popover steuert, das geöffnet bleibt, während der Benutzer es schwebt. Ich weiß, dass es lustig aussieht, aber es ist effizient und klar. Dies ist eine Verschmelzung von zwei Lösungen, die ich zu verschiedenen Problemen mit dem ui-bootstrap Popover/Tooltip mit benutzerdefinierten Auslösern gefunden habe, die ich nicht wieder finden kann, um die richtige Anrechnung zu geben.

app.component('myComponent', { 
restrict: 'E', 
templateUrl: 'path/to/html/with/popover', 
controller: ['$timeout', function ($timeout) { 
    var self = this; 
    this.open = false; 
    this.hovered = false; 

    this.openTooltip = function() { 
     this.hovered = true; 
     if (!this.open) { 
      this.open = true; 
     } 
    }; 

    this.keepTooltipOpen = function() { 
     this.hovered = true; 
    }; 

    this.closeTooltip = function() { 
     this.hovered = false; 
     $timeout(function() { 
      if (!self.hovered) 
       self.open = false; 
     }, 500) 
    }; 
}] 
}); 

Und die HTML selbst:

<div class="myClass"> 
<span class="yetAnotherClass" 
     ng-attr-uib-popover-template="'my-tooltip.html'" 
     popover-placement="top" 
     popover-is-open="$ctrl.open" 
     ng-mouseenter="$ctrl.openTooltip()" 
     ng-mouseleave="$ctrl.closeTooltip()"> 
    Moo moo 
</span> 
</div> 


<script type="text/ng-template" id="my-tooltip.html"> 
    <div class="row" 
     ng-mouseenter="$ctrl.keepTooltipOpen()" 
     ng-mouseleave="$ctrl.closeTooltip()"> 
     <div> 
      bla bla bla 
     </div> 
    </div> 
</script>