MDBootstrap上的工具提示不会显示

Question

我正在使用带有vanilla JS和included的MDBootstrap。

我已经包含了Popper.js，但在此之前我在控制台中没有收到任何错误，不知道它是否会让事情变得更糟，但它在之前或之后都不起作用。

我的CSS

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.9.0/mdb.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
    integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ=="
    crossorigin="anonymous" />

我的javascripts

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
        integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.10.1/umd/popper.min.js"
        crossorigin="anonymous"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.9.0/mdb.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

我的html

<i data-mdb-toggle="tooltip" id="warningIcon"
    title="Warning"
    class="fa fa-exclamation-circle text-warning fa-lg">
</i>

我的javascript

const warningIcon = document.getElementById('warningIcon')
const tooltip = new mdb.Tooltip(warningIcon, {
    title: 'generated warning message'
});
tooltip.show()

我在这里做错了什么？控制台中没有消息，也没有工具提示出现。

Answer 1

所以我最终弄明白了。由于怀疑数据表或其他元素，我尽可能地在JSFiddle中复制代码，但不能使其失败。

作为最后的手段，我尝试用不同的选项初始化工具提示，在使用{ placement: 'auto' }之后，它终于显示出来了(尽管它有点打乱了我的手脚)。

const tooltip = new mdb.Tooltip(warningIcon, {
    title: 'generated warning message',
    placement: 'auto'
});

Answer 2

你不需要popper.js。目前您的title属性缺少一个结束的"，但我会一起删除它，因为您在JS中使用了title。只需确保HTML的结构正确，并按预期工作即可……

<i data-mdb-toggle="tooltip"
   id="warningIcon"
   class="fa fa-exclamation-circle text-warning fa-lg">
</i>

const warningIcon = document.getElementById('warningIcon')
const tooltip = new mdb.Tooltip(warningIcon, {
    title: 'generated warning message'
});
tooltip.show()

https://codeply.com/p/r4ZtEfjCMd