DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

titleAttr not showing tooltip for the datatable button

titleAttr not showing tooltip for the datatable button

sarath_datatablessarath_datatables Posts: 16Questions: 8Answers: 0
in Free community support

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',

                                },
                ]
            }
            ],

Answers

  • colincolin Posts: 15,142Questions: 1Answers: 2,586
    edited May 2018

    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_datatablessarath_datatables Posts: 16Questions: 8Answers: 0

    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;
}
  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    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

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.