Question

我正在使用uib工具提示，并希望在工具提示上显示鼠标时显示工具提示。有没有解决方法。

提前致谢。

Answer 1

这是我在component中使用的代码，用于控制在用户悬停时保持打开的弹出框。我知道它看起来很有趣，但它高效而清晰。这是我使用带有自定义触发器的ui-bootstrap弹出框/工具提示找到的两个解决方案的合并，我现在无法再找到它给予适当的信任。

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>

当鼠标悬停在它上面时，应显示Uib工具提示

1 个答案: