マウスの上にUibのツールチップが表示される

Question

uibツールチップを使用していて、マウスの上にツールチップを表示したかった。回避策はありますか？

ありがとうございます。

Answer 1

これは私がcomponentで使用しているコードで、ユーザーがホバーしている間開いているポップオーバーを制御します。私はそれが面白いと思うが、それは効率的かつ明確です。これは、私が別の問題に気付いた2つのソリューションのマージで、カスタムトリガーを持つui-bootstrap popover/tooltipを使用しています。

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) 
    }; 
}] 
}); 

そして、HTML自体：

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