MDBootstrap 上的工具提示不会显示

Posted 2023-05-08

【中文标题】MDBootstrap 上的工具提示不会显示

【英文标题】：Tooltips on MDBootstrap will not show

【发布时间】：2021-10-30 22:15:41

【问题描述】：

我将 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" />

我的 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()

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

【参考方案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

【讨论】：

我在调试过程中添加了它，因为我在某处读到工具提示如果不存在就会被禁用（尽管我怀疑它是否适用）。虽然缺少引号是剪切和粘贴到这篇文章中的拼写错误，对此感到抱歉。

我在 JSFiddle 中测试了我提供的代码，它可以工作。我将进一步调查我的真实代码，因为似乎有其他东西在干扰。

【参考方案2】：

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

作为最后的手段，我尝试使用不同的选项初始化工具提示，并在使用 placement: 'auto' 后它终于显示出来了（尽管它有点破坏了我的小提琴）。

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