识别和修复css库冲突

Question

我正在尝试将工具提示与来自Materialize库的水平FAB结合起来。但是，结果被另一个库或我网站的一些自定义css损坏（我使用的是angular2，因此有一些不同的css文件）。您可以在下面看到具体问题，但我想知道如何找到哪个css规则在哪个文件中破坏了默认的实现行为。在问题的最后，你可以看到我的约会方法。

在以下代码中，FAB的结束操作图标应在其下方显示悬停工具提示：

<div class="fixed-action-btn horizontal" style="bottom: calc(100% - 80px); right: 24px;">
    <a class="btn-floating btn-large red">
        <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
       <li><a class="btn-floating red tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"><i class="material-icons">insert_chart</i></a></li>
       <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
       <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
       <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
   </ul>
</div>

但是，工具提示消息似乎取代了动作图标的内容？

我假设物化与我网站上的其他一些js / css之间存在冲突。通过强制overflow: display，我可以得到这个结果：

那么现在问题是我们的着色和定位吗？任何想法可能会破坏这些属性，或者我如何找到它们。我针对Chrome Dev工具中的元素，但没有任何明显的原因，我无法检查实际的工具提示，只检查基础按钮。