Polaris-react: Where did the tooltip arrow?

Created on 13 Nov 2018  路  4Comments  路  Source: Shopify/polaris-react

In the new version of polaris the tooltip arrow has disappeared.

image

Please return it to its place.

All 4 comments

Removing the arrow was a UX decision. Heres the commit if you were curious.

The arrow was removed purposefully, as it was buggy when popovers were aligned left or right and was also causing issues in the autocomplete component.

@chloerice I talk about tooltip, not popover. It's a bad decision, it degrade the intuitiveness of the interface. I am disappointed.

@AndrewMusgrave tooltip is a separate component. Why did you remove the arrow from it?
https://polaris.shopify.com/components/overlays/tooltip

We used the tooltips for the setup wizard and they were a great solution because exactly indicate where to click the user. Now the clarity of the interface has deteriorated. At first you broke the activity of the tooltip - it stopped responding to the active state, now you remove the arrow. With each update a new breakdown :( Where did you even see tooltips without arrows?

@kadsystems, we intentionally removed the pointer, or caret from Popover and Tooltip for the following reasons, in addition to those mentioned by @chloerice and @AndrewMusgrave:

  • we believe that it is not needed to communicate a relationship with the activator, as proximity is enough. We are exploring adding motion to reinforce this relationship
  • it creates a gap between the activator and the content, which is a source of visual noise
  • implementation was difficult (problems with shadows and alignment), without much of a return in terms of user experience

We used the tooltips for the setup wizard and they were a great solution because exactly indicate where to click the user

Using this component as a wizard or indicator of where to click is not the intended use-case of this component, and not one we will optimize for. The Tooltip component, as described in the docs you linked, is intended to provide additional context on text content, like a link or an icon, and is meant to be revealed when an action is taken by a merchant.

If this is still not acceptable, we invite you to fork the Tooltip component in your project and add the caret back in, or explore using another library.

It's a bad decision, it degrade the intuitiveness of the interface. I am disappointed.

With each update a new breakdown

Finally, we ask that you please avoid non-constructive criticism, maintain a respectful tone when commenting on this repository, and adhere to the standards in our code of conduct.

Was this page helpful?
0 / 5 - 0 ratings