Hint positioning both vertically and horizontally
matias-pool opened this issue · 6 comments
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.
Line 146 in 1cb28df
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?
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?
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.
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 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:
- The arrow is centered horizontally:
- The arrow is at the edge of the tooltip:
- 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?
Closing this issue for now as there is no obvious solution which fits all cases.