buttons.buttons.titleAttr styling

MarkP12

I've recently been looking into adding buttons to data tables, and this is working great.
Now I want to be able to add a tooltip, and using the titleAttr option this works.
The styling of the tooltip though does not match our BootStrap styling and I was wondering if the styling of the Datatable button tooltip can be changed? I could not find any CSS for this.
Thank you.

allan

No - the title attribute's tooltip is 100% controlled by the browser. This isn't unique to Buttons, it is anything that uses the title attribute. Unfortunately there is no way to control its appearance by CSS.

See MDN for more information about the attribute.

Allan

kthorngren

For Bootstrap 5 you will need to add the data-bs-toggle attribute using buttons.buttons.attr. For example:

      attr: {
        "data-bs-toggle": "tooltip"
      }

See this Bootstrap 5 example:
https://live.datatables.net/robodovu/1/edit

Note you will need initialize the tooltips. The code to do this might need to be placed in initComplete if you are using ajax loaded data.

See the tooltip docs for the version of Bootstrap you are using for the required libraries, attributes and initialization procedures.

Kevin

MarkP12

Thanks @allan, and thank you @kthorngren ... this looks very promising.

I'm using Angular, and your example is extremely helpful pointing me in the right directly. Thank you.

MarkP12

Coming back to this after a while and I'm still unable to get this to work on an Angular app. For whatever reason the BS5 attribute is not being recognised and after trying to initialise the BS5 tooltips on the page it still doesn't work

MarkP12

To add, I did mange to get the bootstrap initialisation code finding the tooltips by setting a timer and calling the initialise a bit later on... suggesting that the datatable needed to populate first. But then when I moved the mouse cursor over the item I got:

i.createPopper is not a function. (In 'i.createPopper(this._element,t,this._getPopperConfig(s))', 'i.createPopper' is undefined)

allan

If you could create a minimal test case on StackBlitz, a git repo or similar, I can take a look at it.

Allan