buttons.buttons.titleAttr styling

buttons.buttons.titleAttr styling

MarkP12MarkP12 Posts: 7Questions: 2Answers: 1

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.

Answers

  • allanallan Posts: 63,161Questions: 1Answers: 10,406 Site admin

    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

  • kthorngrenkthorngren Posts: 21,147Questions: 26Answers: 4,918
    edited August 2023

    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

  • MarkP12MarkP12 Posts: 7Questions: 2Answers: 1

    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.

  • MarkP12MarkP12 Posts: 7Questions: 2Answers: 1

    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 :(

  • MarkP12MarkP12 Posts: 7Questions: 2Answers: 1

    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)

  • allanallan Posts: 63,161Questions: 1Answers: 10,406 Site admin

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

    Allan

Sign In or Register to comment.