Topic: Can't use tooltip for buttons inside datatables

Whaley248 premium asked 2 years ago


Expected behavior using the render.mdb.datatable event to apply tooltip to my buttons

Actual behavior tooltip will appear for a second until user moves mouse, then once is it is hidden it will not appear until table is re-rendered (where tooltip will appear once again)

Resources (screenshots, code snippets etc.) code is inside a razor page (i.e @foreach to load row data)

        var tableData = {
            rows: [
            @foreach(var role in roles)
            {<text>
                {
                    id: @role.Id, name: '@role.Name', description: '@role.Description', permissionIds: '@role.PermissionIds',
                    buttons: `
<button class="btn btn-outline-secondary btn-sm btn-floating" data-mdb-toggle="tooltip" title="Assign Users" onclick="app.roles.setUserForm(@role.Id)"><i class="fad fa-user-plus"></i></button>` + (@role.Id === 1 ? '' :
`<button class="btn btn-outline-primary btn-sm btn-floating" data-mdb-toggle="tooltip" title="Edit Role" onclick="app.roles.setForm(@role.Id)"><i class="fad fa-cogs"></i></button>
 <button class="btn btn-outline-danger btn-sm btn-floating" data-mdb-toggle="tooltip" title="Delete" onclick="app.roles.delete(@role.Id)"><i class="fad fa-trash-alt"></i></button>`)
                },
            </text>}
            ],
            columns: [
                { label: '', field: 'id', format: function (cell, value) { $(cell).addClass('d-none') }},
                { label: 'Name', field: 'name' },
                { label: 'Description', field: 'description' },
                { label: 'Actions', field: 'buttons', sort: false, width: 100 },
                { label: '', field: 'permissionIds', format: function (cell, value) { $(cell).addClass('d-none') } },
            ]
        };
        const datatable = document.getElementById('roles-datatable');

        datatable.addEventListener('render.mdb.datatable', function () {
            $('[data-mdb-toggle="tooltip"]', datatable).each(function () {
                //tried alot of different combos to make this work...
                const tooltip = new mdb.Tooltip(this, {
                    trigger: 'hover',
                    boundary: 'window',
                    container: 'body'
                });
            });
        });
        const datatableInstance = new mdb.Datatable(datatable, tableData);
        $('i[data-mdb-sort="id"],i[data-mdb-sort="permissionIds"]', datatable).parent().hide();

Grzegorz Bujański staff answered 2 years ago


You need to add datatables via js: https://mdbootstrap.com/docs/standard/data/datatables/#section-basic-data-mdb-structure

After adding items with a tooltip, it is also necessary to initialize the tooltips. Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3390361#js-tab-view


Darryl free answered 2 years ago


this still isn't working


Grzegorz Bujański staff commented 2 years ago

Please add here the code that doesn't work for you. I'll check it.


Darryl free commented 2 years ago

This, for example, won't work inside a datatable element:

<a href="#" data-mdb-toggle="tooltip" title="Hi! I'm tooltip">tooltip</a>

where the datatable is implemented via something like:

<div id="dt" class="datatable border mb-4" data-mdb-hover="true">
  <table class="table">

  ....

    </table>
   </div>

Grzegorz Bujański staff answered 2 years ago


Bootstrap fixed one of the errors that may be related to it: fixed tooltips not appearing after rapid focus in and out. Update mdb-ui-kit to the latest version and check if the bug still exists.



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

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.3.0
  • Device: Surface Book 3
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No