titleAttr not showing tooltip for the datatable button

sarath_datatables

Hello Team

i had tried **titleAttr **for the buttons and not able to achieve tool-tip for the button.

code is:

 dom: 'Bl<"toolbar">frtip',
            buttons: [
                {
                extend: 'colvis',
                text: 'Customize View',
                collectionLayout: 'two-column',//to make the menu apear center add "fixed two-column'
                titleAttr: "Choose which properties you would like to see in the table by selecting them within this menu by a click"
            },
            {
                extend:'colvisRestore',
                text:'Default View'
            },
             {
                extend: 'collection',
                text: 'Export',
                titleAttr: 'Export the overview table with the chosen properties to different formats. For possible used Constants check /xyz Table',
                buttons: [
                    {
                        text: 'EXCEL',

                        },
                        {
                            text: 'CSV',

                            },
                            {
                                text: 'PDF',

                                },
                ]
            }
            ],

colin

Hi @sarath_datatables ,

Yep, that's the correct way to do it, see the example here. Is your CSS affecting it perhaps, may be not allowing it into the foreground? We can take a look if you want to link to a page or test case.

Cheers,

Colin

sarath_datatables

hi colin

thanks for quick response.
im sorry link cannot be shared as it is local and code for css is shared below.
i had overridden the css for column visibility . please check the code below for css:

/*-- css related to the column visibility button and menu */
div.dt-buttons {position: relative;float: left;font: 0.9em Arial; padding-bottom: 0.25em;font-size: 12px;}
div.dt-buttons .dt-button {margin: 0.25em 0.333em 0.25em 0;font-size: 12px;} 
/*-- css related to two column popup container*/
div.dt-button-background {position: fixed;top: 0; left: 0;width: 100%;height: 100%;background: black;opacity: .35;filter: alpha(opacity=35); z-index: 2001;} 
div.dt-button-collection {font: 0.9em Arial;position: absolute;margin-top: 3px; padding: 4px;border: 1px solid #ccc;background-color: #fff;overflow:hidden; z-index: 2002;width: auto;}
div.dt-button-collection .dt-button {text-align: center;position: relative;display: block;margin-right: 0;width: 99%;font-size: 12px;}
/*-- css related to two column popup */
div.dt-button-collection.two-column {
    column-count: 2;
    padding-bottom: 1px;
    width: auto;
}
/*-- css related to buttons inside the popup */
div.dt-button-collection button.dt-button, div.dt-button-collection div.dt-button, div.dt-button-collection a.dt-button {
    display: block;
    float: none;
    left: 0;
    margin-bottom: 4px;
    margin-right: 1px;
    position: relative;
    right: 0;
    width: 175px;
}

colin

Hi again,

I just tried your CSS in my example, and it's still working as expected, so I'm wondering if there's some other CSS interacting with it, something that wants to keep the foreground?

Sorry if I seem vague, but without seeing a live example, it's mostly guesswork with CSS.

Cheers,

Colin