Tooltip doesn't handle positionning properly when underlying image is zoomed

Creating a UI using jquery ui tooltips and jquery ui theme icons. e.g.

$('<span title="Move next"></span>')

.css('position', 'absolute')

.css('top', '45%')

.css('left', '100%')

.addClass('ui-state-default ui-corner-all ui-icon ui-icon-arrow-1-e')

.tooltip( { predelay: 300 })

Decide that the icons are too small for the application, need to increase their size. Quickly discover that css width/height don't work well with the way the theme icons are cut out of a shared image. Try css zoom like so:

$('<span title="Move next"></span>')

.css('position', 'absolute')

.css('top', '45%')

.css('left', '100%')

''' .css('zoom', '200%')'''

.addClass('ui-state-default ui-corner-all ui-icon ui-icon-arrow-1-e')

.tooltip( { predelay: 300 })

Icons are now properly positioned and appropriately sized. Yay!

Uh-oh. Observe that the tooltip positioning is now a-whacko.

Remove the jquery ui tooltip. Observe that the intrinsic tooltip positionning logic is working as expected.