Overriding CSS styles of the jQuery UI Tooltip widget

Question

I am using the jQuery UI Tooltip widget

Answer 1

I tried all of the options above and none worked for me.

I looked into the tooltip options docs which linked to this article about theming, after reading it I tried this which worked:

$('#my_selectr').tooltip({"classes": {"ui-tooltip": "my-custom-class-name", "ui-tooltip-content": "my-custom-class-name-content"}})

Then just add the 2 CSS classes with your styling:

my-custom-class-name {
...
}
my-custom-class-name-content {
...
}

Note that you might have to use !important in your custom classes.