工具提示没有显示

2018-07-02 19:10:35

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

这个想法是让工具提示在必填字段中可见。

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

我在这里有两个重要的东西，它们会显示出发生了什么事情：

工作plunk（角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

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

top: -9999px !important

left: -9999px !important

visibility: hidden !important

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

解决方案1

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

Plunker

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

.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类.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内联样式uib-position-measure并以相同的方式处理它。

链接地址: http://www.djcxy.com/p/91413.html

上一篇: Tooltip not showing

下一篇: Gradle hangs on Executing tasks: [:android:generateDebugSources