Tooltip does not appear


Topic: Tooltip does not appear

snirkleshift asked 10 months ago

Expected behavior Tooltip appears.

Actual behavior Tooltip does not appear.

Resources (screenshots, code snippets etc.)

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.


Michał Duszak staff answered 10 months ago

Your HTML seems to be missing a quotation mark. Try this:

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

https://mdbootstrap.com/snippets/standard/m-duszak/3286165#html-tab-view


snirkleshift commented 10 months ago

My bad, got lost in copy/paste. All quotation marks are present.


Michał Duszak staff commented 10 months ago

Does it work for you now, as it does in the snippet?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: PC
  • Browser: All
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No