Conversation
Justin-MacIntosh
left a comment
Justin-MacIntosh
left a comment
There was a problem hiding this comment.
This is awesome to see. This component is going to save us a lot of headaches down the line, thank you!
| <QuestionMarkIcon class="size-5 text-gray-500 hover:text-gray-700 transition-colors" /> | ||
| )} | ||
|
|
||
| {isVisible() && ( |
There was a problem hiding this comment.
For stuff like this, we've been using the builtin Show from SolidJS :
https://docs.solidjs.com/reference/components/show
There was a problem hiding this comment.
I had no idea this method existed. Solid JS seems better than React JS
|
|
||
| const handleMouseEnter = () => { | ||
| if (containerRef) { | ||
| const rect = containerRef.getBoundingClientRect(); |
There was a problem hiding this comment.
For readability, I have a few small nitpicks here:
- Creating a typescript type called something like TooltipAlignment set to
'center' | 'left' | 'right'. - Having the
handleMouseEnter(...)function call another function for determining alignment that returns aTooltipAlignment, and then settingsetPosition(...);based on the return value.
This would make it easier at-a-glance to know what handleMouseEnter(...) does. This is purely stylistic so feel free to ignore.
There was a problem hiding this comment.
That makes sense. It would make the code more readable and maintainable.
| class={`absolute w-3 h-3 bg-white border-t border-l border-gray-200 rotate-45 -top-[7px] ${ | ||
| position().align === 'center' ? 'left-1/2 -translate-x-1/2' : | ||
| position().align === 'left' ? 'left-3' : | ||
| 'right-3' |
There was a problem hiding this comment.
Right now, the arrow isn't pointing at the center of the tooltip. We should aim for that, or remove the arrow entirely if the math of hitting the center is too complicated and error-prone.
There was a problem hiding this comment.
Not sure what you mean here. This doesn't need to exist, and is for decoration.
Without
With
There was a problem hiding this comment.
Sorry for not being clear. I meant that typically the arrow on a tooltip points directly to the center of the thing it's pointing at, in this case that would be the question mark. But as is, the arrow is pointing a little to the left when the tooltip is right-aligned. I was suggesting we should try to fix that and point to the center, but that if it's too much trouble we could just remove the arrow entirely.
2 participants
This PR adds a reusable component that shows a tooltip with a custom string passed as a prop.
Example usage: