Skip to content

Tooltip: Adjust placement of tooltips to avoid overlapping their trigger #37076

Closed as not planned

Description

@shaunandrews

The tooltip's that show throughout the editor sometimes overlap with the button or element that triggers the tooltip. Here's a few examples:

image

image

image

image

This doesn't seem to be the case for the block toolbar, which gives the tooltip a little more breathing room:

image

I think we should take this same approach everywhere the tooltip is displayed. Here's how it could work adding more space to the above examples:

image

Activity

  1. ramonjd commented on Dec 2, 2021

    @ramonjd
    Member

    Just tooling around with this a bit.

    Assuming the position is "bottom", adding this to packages/components/src/tooltip/style.scss has some effect

    .components-tooltip {
    	margin-top: $grid-unit-15;
    }

    Screen Shot 2021-12-03 at 7 04 02 am

    Screen Shot 2021-12-03 at 7 03 41 am

    There would have to be overriding classes for "top" and the other positions probably.

  2. jordesign commented on Aug 18, 2023

    @jordesign
    Contributor

    I'm no longer able to reproduce the issue in the locations mentioned above (or elsewhere) in WP6.5 - tooltips all appear to offer some spacing between the element and the tip. Accordingly I'll close this as unreproducible,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions