Question

我有一个简单的表单，位于Angular UI Bootstrap的选项卡中。表单控件具有与其关联的工具提示以显示错误。我正在使用自定义事件来切换工具提示可见性。

我们的想法是在必填字段上显示工具提示。

使用UI-Bootstrap版本1.3.2和Angular 1.4.8一切正常，但自从我升级到Angular 1.5.3工具提示后不再显示。一旦我在文本字段中输入内容并删除它，它将显示，这使我相信现在需要初始化模型。

我这里有两个可以准确显示正在发生的事情：

工作插件（角度为1.4.8） - https://plnkr.co/edit/IkuOdCrcFJ8lBeNA5sSh

<data-uib-tabset>
    <data-uib-tab>
        <data-uib-tab-heading>Tab 1</data-uib-tab-heading>
        <form name="testform">
            <input type="text" name="test" id="test" 
                data-ng-model="test"
                data-ng-required="1"
                data-tooltip-append-to-body="true"
                data-tooltip-placement="right"
                data-uib-tooltip="Required!"
                data-tooltip-trigger="none"
                data-tooltip-is-open="testform.test.$error.required" />
        </form>
    </data-uib-tab>
    <data-uib-tab>
        <data-uib-tab-heading>Tab 2</data-uib-tab-heading>
         Content 2
    </data-uib-tab>
</data-uib-tabset>

不那么有效（有角度1.5.3） - https://plnkr.co/edit/Wl3Bq13FKPnqW7RqwfiJ

Answer 1

我注意到评论中提到有一个类被附加 - uib-position-measure。它有3种风格导致问题：

top: -9999px !important
left: -9999px !important
visibility: hidden !important

编辑 - 我正在重新组织我的帖子，因为我已经深入挖掘了这个。仍然不认为我有一个很好的解决方案，但至少有一些信息和选项。

解决方案1 

只需使用javascript删除罪魁祸首课uib-position-measure，然后调整top上的left和.tooltip样式。

Plunker

window.onload = function() {
    var tooltip = document.getElementsByClassName('tooltip')[0];
    tooltip.className = tooltip.className.replace(/\buib-position-measure\b/,'');
}

.tooltip {
  top: 42px;
  left: 150px;
}

解决方案2

使用javascript覆盖导致问题的样式。

Plunker

<script type="text/javascript">
  window.onload = function() {
    var tooltip = document.getElementsByClassName('tooltip')[0];
    tooltip.setAttribute("style", "visibility: visible !important; top: 42px !important; left: 150px !important;");
  }
</script>

解决方案3

我能够在ui-bootstrap.js文件中找到创建.uib-position-measure类的位置。我从可见性，顶部和左侧删除了!important。之后，我能够在.tooltip类上使用css解决问题。

Plunker

ui-bootstrap.js是我创建的文件，复制了原始文件，并修改了uib-position-measure类 - 它位于第7327行的底部。

在style.css我简单地添加了以下内容：

.tooltip {
  visibility: visible;
  top: 42px;
  left: 150px;
}

相关问题

我也能在GitHub上找到与此相关的问题 - https://github.com/angular-ui/bootstrap/pull/5530

有人删除了一些内联样式并将它们添加为类，以便它们可以被CSS覆盖而不是使用javascript。这可能是处理它的最佳方式 - https://github.com/angular-ui/bootstrap/pull/5530/commits/44643775dece535b3ffa62d7edae86eaa12ac154。问题是找到uib-position-measure内联样式的位置并以相同的方式处理它。

Answer 2

使用 popover-popup-delay 重新定位元素，类 uib-position-measure 不再在其上处于活动状态。

Angular Bootstrap - 工具提示未显示

2 个答案: