MDBootstrap 上的工具提示不会显示

Question

我将 MDBootstrap 与 vanilla JS 一起使用并包含 JQuery。

我已经添加了 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" />

我的javascript

    <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

您不需要 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

Answer 2

所以我最终想通了。怀疑数据表或其他元素，我在 JSFiddle 中尽我所能复制了我的代码，但无法使其失败。

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

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

MDBootstrap 上的工具提示不会显示

Tooltips on MDBootstrap will not show

jquery

twitter-bootstrap

mdbootstrap