Skclusive.Material.Component icon indicating copy to clipboard operation
Skclusive.Material.Component copied to clipboard

Tooltip

Open esso23 opened this issue 5 years ago • 8 comments

https://github.com/skclusive/Skclusive.Material.Component/issues/12

WIP

Usage:

<Tooltip>
    <TitleComponent>
        <Typography Variant="@TypographyVariant.Subtitle2">Tooltip text</Typography>
    </TitleComponent>
    <ChildContent>
        <Button Variant="@ButtonVariant.Outlined">Tooltip</Button>
    </ChildContent>
</Tooltip>

or

<Tooltip Title="Tooltip text">
      <Button Variant="@ButtonVariant.Outlined">Tooltip</Button>
</Tooltip>

I need some help here. I can't get the transition to work properly. I tried using the Styles from the transition context but that does not seem to work correctly. Using the reference seems like the only way. But as far as I understand it, the transition begins before the Popper is created (?) and thus the transition does not work when Tooltip is appearing (it works when it is disappearing or when I keep it mounted).

esso23 avatar Jun 04 '20 11:06 esso23

great. will check it.

skclusive avatar Jun 05 '20 04:06 skclusive

@esso23 this is really great effort. you have taken one of the complex primitive component. i would need to check this out locally and will update you.

thanks for this contribution. encourages me to concentrate and start working on this library again. :-)

skclusive avatar Jun 05 '20 05:06 skclusive

@esso23 looks great. i see we have both primitives Popper and Tooltip (though Tooltip depends on Popper).

can we split them and push the Popper as a standalone component without Tooltip and verify it satisfies the requirement for that component compared to Material-UI?

Once Popper is implemented and tested with samples (https://material-ui.com/components/popper/#popper) we can built the Tooltip component on top of it.

doing so we will end up with one more project (we have to find a better approach fixing multi project) Popper and Tooltip.

do you think this works? because i faced same issues while doing multiple components together. so i started implementing each primitive component one after another with samples to verify against material-ui.

skclusive avatar Jun 05 '20 07:06 skclusive

Thanks.

No problem with splitting the project, should be easy. But in the original post I mentioned I have a problem (the implementation is not finished). Could you help me with that first? I spent like 2 days trying to make the transition work, but I had no success with it.

esso23 avatar Jun 05 '20 11:06 esso23

@esso23 definitely i am looking forward to help fixing the transition issue.

initially i thought the transition is related to Tooltip component. Hence recommended for splitting it which could help identifying issue. Now i checked the material-ui implementation where Popper handles childProps handleEnter and handleExit events. if that were the issue is? could you point out which code block causing the issue? I am also checking it out.

skclusive avatar Jun 05 '20 20:06 skclusive

I tried the solution but I ended up just where I was before. I 'm getting the error again (see pic and this issue: https://github.com/skclusive/Skclusive.Material.Component/issues/39). That's why I tried to wrap the transition around the Popper instead of the other way around. This error occurs when the Popper attempts to close. Anyway, I don't see any transition even when the Popper is appearing.

transition-tooltip

esso23 avatar Jun 09 '20 14:06 esso23

@esso23 oh ok. that is strange. i am unusually bit occupied during this pandemic. will try to reproduce the issue and get back to you.

skclusive avatar Jun 15 '20 10:06 skclusive

@esso23 hi. i have took reference of this PR and material-ui implementations and ported in https://github.com/skclusive/Skclusive.Material.Lab/tree/develop now.

skclusive avatar Dec 19 '20 20:12 skclusive