Skip to content

Set the transform-origin of the Popper / Tooltip classes for transitions that scale. #1944

@rbozan

Description

@rbozan

Object.assign(popover.style, { position: strategy, left: yOnly ? "0" : px(x), right: "auto", top: px(y) });

Based on the placement you should set the transform-origin as well so that when a transition is enabled that adjusts the scale or rotate the transition starts from the correct place instead of in the center (default of transform-origin).

Can be done by doing something like this (copied from my own implementation of floating-ui):

	Object.assign(popoverElement!.style, {
				left: `${x}px`,
				top: `${y}px`,
				transformOrigin:
					{
						top: 'bottom',
						bottom: 'top',
						left: 'right',
						right: 'left'
					}[placement.split('-')[0]] || 'center'
			});

If not desired then give the option to adjust the popover style based on properties like placement so people can do it themselves.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions