Tooltips on MDBootstrap will not show-CodePudding

I'm using MDBootstrap with vanilla JS and included JQuery.

I've included Popper.js but i got no errors in the console before that, don't know if it made matters worse but it didn't work before or after.

My 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" />

My 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>

My html

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

My javascript

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

What am i doing wrong here? There's no messages in the console, and no tooltip appears.

CodePudding user response：

You don't need popper.js. Currently your title attribute it missing a closing ", but I would remove it all together since you're using title in the JS. Just make sure the HTML is properly structured and it should work as expected...

<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

CodePudding user response：

So i eventually figured it out. Suspecting datatables or other elements I replicated my code as best i could in JSFiddle but could not get it to fail.

As a last resort i tried initializing the tooltip with different options and after using { placement: 'auto' } it finally showed (though it broke my fiddle a bit).

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