Tooltip

[esso23]

#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).

[skclusive]

great. will check it.

[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]

@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.

[esso23]

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.

[skclusive]

@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]

@esso23 i guess the transition component should go under the Popper component as here https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js#L505.

so i guess we need to have Popper component have ChildContent with parameter say,

public RenderFragment<IPopperContext> ChildContent

as here in https://github.com/skclusive/Skclusive.Material.Component/blob/master/Modal/src/Modal/Modal.cs#L28

then when rendering we could have <Grow as child component using the popper context.

ex:

<Popper AnchorRef="@_popperAnchor"
            Placement="@Placement"
            Open="@Open"
            PopperOptions="@PopperOptions"
            @attributes="Attributes"
            Transition
            Class="@PopperClasses()"
            Context="PopperContext">
             <Grow
            RootRef="@PopperContext.RefBack"
            Appear
            In="@PopperContext.Open"
            TransitionDuration="@TransitionDuration"
            AppearTimeout="@AppearTimeout"
            EnterTimeout="@EnterTimeout"
            ExitTimeout="@ExitTimeout"
            MountOnEnter="@MountOnEnter"
            UnmountOnExit="@UnmountOnExit"
            OnEnter="@(CreateOnEnter(@PopperContext.OnEnter))"
            OnExited="@(CreateOnExited(@PopperContext.OnExited))"
            OnEntering="@HandleEntering"
            OnEntered="@HandleEntered"
            OnExit="@HandleExit"
            OnExiting="@HandleExiting"
            role="none presentation"
            Context="GrowContext">
<div @ref="@(new DelegateReference(GrowContext.RefBack, PaperRef)).Current">
            @if (TitleComponent == null)
            {
                <Typography Variant="@TypographyVariant.Subtitle2">@Title</Typography>
            }
            else
            {
                @TitleComponent
            }
            @if (Arrow)
            {
                <span id="arrow" class="@ArrowClasses()" data-popper-arrow></span>
            }
        </div>
        </Grow>
</Popper>

something similar here https://github.com/skclusive/Skclusive.Material.Component/blob/master/Popover/src/Popover/Popover.razor#L31

[esso23]

I tried the solution but I ended up just where I was before. I 'm getting the error again (see pic and this issue: #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.

[skclusive]

@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]

@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.