Tooltip in the Sidepanel for cut-off layer name Text #297
Conversation
|
Wooo excited about this one! |
There was a problem hiding this comment.
I also would increase the length of the text in textContent so that the tooltip has more information like so
09ce88b#diff-66c17179f449d824754ee054672c58937e6bd0d9416f38e76a9c8929b88fc03cL232
| @@ -45,7 +45,7 @@ const LayersPanel = observer(() => { | |||
| <PinLeftIcon /> | |||
| </button> | |||
| </TabsList> | |||
| <Separator className="mt-1" /> | |||
| <Separator className="mt-1" id="LayersPanelDiv" /> | |||
There was a problem hiding this comment.
I would move the id to the tab container since we can use it to calculate the width offset
09ce88b#diff-f0245d5cb38ab89312972b0120a231f7e191c7938935b2c5dd18f4c3cddbfe08R49
| {node.data.textContent} | ||
| </span> | ||
| </TooltipTrigger> | ||
| {isOverflowing && ( |
There was a problem hiding this comment.
I would just show the tooltip if there's text content for simplicity
09ce88b#diff-eced7d84f55e60e45f2876a4fc40b812bb12b845d5b5cdb4d641a619346d96d1R181
There was a problem hiding this comment.
I think we'll need it for every type of layer
There was a problem hiding this comment.
This seems to be applying to it all @drfarrell
| </span> | ||
| </TooltipTrigger> | ||
| {isOverflowing && ( | ||
| <TooltipPortal container={document.getElementById('LayersPanelDiv')}> |
There was a problem hiding this comment.
You can use sideOffset to move the tooltip position based on the width of the container. Since the problem is that the node is overflowing, we can calculate the offset as the containerWidth - nodeWidth - scrollPosition
8405200#diff-eced7d84f55e60e45f2876a4fc40b812bb12b845d5b5cdb4d641a619346d96d1R81
|
Overall, nice work! You had most of it going, just needed to adjust the tooltip position and some small improvements (I opened a draft PR on top of yours for reference since I can't push to your branch) |
|
My recommendation is to make it a max width of 200px, and restrict it to 4 lines of text before going ... For example: So it should look a little something |
Does this look Good! |
|
Seems like the bottom padding is a little smaller? |
Description
Tooltip for concatenated layer name text
What is the purpose of this pull request?