JQuery UI Tooltip and DataTables Class Conflict

mellamokb

I am finding conflict in the CSS between the Demo CSS provided by datatables, and the CSS used in JQuery UI ToolTip plugin. The class name is .bottom. The DataTables CSS looks like this:

.top, .bottom {
padding: 15px;
background-color: #F5F5F5;
border: 1px solid #CCCCCC;
}

The JQuery UI ToolTip Div looks like this:

This option will show headers for all employees, even if they have no pay items.

Since it has a class of "bottom", it is affected by the datatables CSS. The result is a funky looking popup window, where the arrow is colored white, and the tooltip is colored grey:

http://i.imgur.com/WSbbkWO.png

What is the proper way to address this?

mellamokb

I realized after some research, the class conflict is actually coming from BootStrap Tooltip, not JQuery UI... still the same problem though.