Opened 9 years ago

Closed 9 years ago

#7315 closed bug (notabug)

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

Reported by: JayBeavers Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.css-framework Version: 1.8.11
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (1)

comment:1 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

Please report tooltip issues on the forum or planning wiki. We don't accept tickets for unreleased plugins.

Note: See TracTickets for help on using tickets.