Tooltip does not appear


Topic: Tooltip does not appear

snirkleshift asked 3 years 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 3 years 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 3 years ago

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


Michał Duszak staff commented 3 years 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