Hint positioning both vertically and horizontally

[matias-pool]

It would be great if it was possible to position the hint both vertically and horizontally, like position="topLeft" or horizontalPosition="left" verticalPosition="top" or similar.

react-hint/src/index.js

Line 146 in 1cb28df

switch (at) {

We extended the switch statement in getHintData to handle our particular use case, but this approach may not be practical as a general solution.

      case 'topLeft':
        top = 0;
        left = -hintWidth;
        break;

What would be your suggestion?

[slmgc]

Hi, that's a good idea, actually. I need to check how it's usually implemented. We can have a discussion here about the implementation details. I would prefer top-left to topLeft though. I am not sure if the tooltip should be positioned exactly at the edge of the element or should it be close to the edge. What do you think? What's your use-case? Can you append some screenshots?

[matias-pool]

Our use case is a multilingual questionnaire where the user should be able to listen to an audio clip
for any label. We are using react-hint to wrap the audio player. Extending the case statement is the simplest way, but it adds many lines of code.

[matias-pool]

For a more dynamic approach maybe a "top-left".split('-') could be done, and then top and left would be set for every item.

In a pseudo code fashion I mean:

const positions = "top-left".split('-');

if (positions.includes('top')) {
  top = 0;
}

if (positions.includes('left')) {
  left = -hintWidth;
}

[matias-pool]

I'm adding a patch to show how it could be done.

• There is no sanity checking or error handling
• A case 'center': left = 0 could be added for consistency
• The other switch must do something similar at
  

  react-hint/src/index.js

  Line 117 in 1cb28df

  switch (at) {

[slmgc]

@matias-pool after a second thought, it doesn't seem to be a simple decision. I don't think there is a universal solution to align tooltips vertically + horizontally. For example, let's take "bottom-left", there are 3 possible implementations:

1. The arrow is centered horizontally:

2. The arrow is at the edge of the tooltip:

3. Your proposal shifts the whole tooltip to the left by its width (in this case, the arrow should be probably hidden completelly):

I don't think there could be a solution that fits everyone's needs and I don't want to include something which won't be useful for majority of users. Do you have thoughts on this?

[slmgc]

Closing this issue for now as there is no obvious solution which fits all cases.