Override jquery ui tooltipClass - css

Question

I'm trying to override the jquery ui tooltip class so i can apply a custom class. Using knockout to bind to a span in a cell in a row in a table. But the tooltipClass is ignored. Any idea why? Jquery-ui-1.10
<div data-bind="visible:atleastOne">
<table class="mytable">
<thead>
<tr>
<th colspan="1" class="white-back" />
<th class="border-bottom" colspan="5">Orders</th>
</tr>
<tr>
<th class="title-column border-right" />
<th class="value-column">Account</th>
<th class="value-column">Amount</th>
<th class="value-column">Day</th>
<th class="value-column">Percentage</th>
<th class="value-column">Date</th>
</tr>
</thead>
<tbody data-bind="foreach: { data: items, as: 'item' }">
<!-- ko if: $parent.hasMultiple -->
<tr>
<tdborder-right" colspan="5">
<span class="bold" data-bind="text: 'Item ' + item.Code()"></span>
</td>
<td colspan="5"></td>
</tr>
<!-- /ko -->
<!-- ko foreach: { data: item.childen, as: 'child' } -->
<tr style="display: none;">
<td data-bind="attr:{ id: 'tooltip-content-' + item.code() + '-' + child.code() }">
<div data-bind="template: 'data-template', data: $data">
</div>
</td>
</tr>
<!-- ko foreach: { data: child.readOnly.subOrders, as: 'sub' } -->
<tr class="child-row" data-bind="css: { alt: $parentContext.$index() % 2 }">
<td>
<span data-bind="visible: $index() == 0, text: item.readOnly.title, tooltip: {tooltipClass: 'test', show: true, content: '#tooltip-content-' + item.code() + '-' + child.code() }"></span>
</td>
<td>
<span data-bind="text: sub.readOnly.acc"></span>
</td>
<td class="numeric">
<span data-bind="text: sub.readOnly.amount"></span>
</td>
<td>
<span data-bind="text: sub.readOnly.day"></span>
</td>
<td class="numeric">
<span data-bind="text: sub.readOnly.percentage"></span>
</td>
<td>
<span data-bind="text: sub.readOnly.date"></span>
</td>
</tr>
<!-- /ko -->
<!-- /ko -->
</tbody>
</table>
</div>
css
.test
{
background:pink;
}
If I add this to my stylesheet, the style is overridden wherever a tooltip is used as expected.
.ui-tooltip
{
background:blue;
}
However, I need to specify a different style on different tooltips, so this won't work for me.
I tried targeting the table itself but it doesn't work:
.mytable .ui-tooltip
{
background:pink;
}