Styling MudDrop ItemRender

Question

I have this component. When code is commented, ItemRenderer (MudPaper) takes 100% width of parent (MudDropZone). But when I uncomment code and add showing description on hover, it stops to fill 100% of parent and fill only 50% of it. It looks awful.

I think problem is in ChildComponent but I dont know how to get around it. Do you have any ideas? I use Mudblazor components.

        <MudDropContainer   T="TransactionViewModel" 
                            Items="transactions" 
                            ItemsSelector="@((item,dropzone) => Enum.GetName(typeof(TransactionCategoryEnum), item.Category) == dropzone)" 
                            ItemDropped="ItemUpdated" 
                            Class="d-flex flex-wrap flex-grow-1">
            <ChildContent>
                <MudDropZone T="TransactionViewModel" Identifier="Saves" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
                    <MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:forestgreen">Saves</MudText>
                 </MudDropZone>
                <MudDropZone T="TransactionViewModel" Identifier="Fees" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
                    <MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:darkred">Fees</MudText>
                </MudDropZone>
                <MudDropZone T="TransactionViewModel" Identifier="Entertainment" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
                    <MudText Typo="Typo.h6" Class="mb-4" Style="text-align:center;color:dodgerblue">Entertainment</MudText>
                </MudDropZone>
            </ChildContent>
            <ItemRenderer>
               @*  <MudTooltip Placement="Placement.Bottom" ShowOnHover="true" Delay="150" Class="ma-4 pa-4">
            <ChildContent>*@
                        <MudPaper Elevation="25" Class="pa-2 my-2">
                            <MudGrid>
                                <MudItem xs="8">
                                    <MudText Typo="Typo.body1">@context.Name</MudText>
                                </MudItem>
                                <MudItem xs="4" Class="text-align-right">
                                    <MudText Typo="Typo.body1">@context.Price</MudText>
                                </MudItem>
                            </MudGrid>
                        </MudPaper>
            @*  </ChildContent>
                    <TooltipContent>
                        <MudText Typo="Typo.body2">@context.Date.Format()</MudText>
                        <MudText Typo="Typo.body2">@context.Description</MudText>
                    </TooltipContent>
                </MudTooltip> *@
            </ItemRenderer>
        </MudDropContainer>

I tried add classes to components like w-100 or styles like width:100% but it doesnt work.

Answer 1

The Style attribute of the Tooltip is for the TooltipContent. You can use RootStyle for the ChildContent

    <MudTooltip ... RootStyle="width: 100%;">
        <ChildContent>
            ...
        </ChildContent>
        <TooltipContent>
            ...
        </TooltipContent>
    </MudTooltip>

Mudblazor Snippet