Tooltip displaying incorrectly.

[Daniel Tujo]

I have two dropdown lists with the same Titem class but each one saving their selection to a separate DataSource.

For each dropdown implemented a tool tip however depending on which drop down you open first will determine where EACH tooltip will appear on the screen. Not sure if this is a bug, but I would like to get this to work. Its two different tooltips but their exactly alike except they have different @ref and the Dropdown event opened closed parameters are different as well. Is this a bug, am I not doing it correctly. I would hate to have to create two different objects if they are exactly the same.

First dropdown opened shows tool tip correct.

Second one has tooltip in wrong spot:

Code:

<div class="col-1">

    <SfTooltip @ref="Status1" ID="Tooltip" Target=".e-list-item .name[Title]"></SfTooltip>

    <SfDropDownList TValue="string" TItem="OpStatus" DataSource="OpStatusList1">

        <DropDownListFieldSettings Value="Status" Text="Status"></DropDownListFieldSettings>

        <DropDownListTemplates TItem="OpStatus">

            <ItemTemplate>

                <div class="name" title="@((context as OpStatus).Description)">@((context as OpStatus).Status)</div>

            </ItemTemplate>

        </DropDownListTemplates>

        <DropDownListEvents TValue="string" TItem="OpStatus" Opened="Status1Open" OnClose="Status1Closed"></DropDownListEvents>

    </SfDropDownList>

</div>

<div class="col-1">

    <SfTooltip @ref="Status2" ID="Tooltip" Target=".e-list-item .name[Title]"></SfTooltip>

    <SfDropDownList TValue="string" TItem="OpStatus" DataSource="OpStatusList2">

        <DropDownListFieldSettings Value="Status" Text="Status"></DropDownListFieldSettings>

        <DropDownListTemplates TItem="OpStatus">

            <ItemTemplate>

                <div class="name" title="@((context as OpStatus).Description)">@((context as OpStatus).Status)</div>

            </ItemTemplate>

        </DropDownListTemplates>

        <DropDownListEvents TValue="string" TItem="OpStatus" Opened="Status2Open" OnClose="Status2Closed"></DropDownListEvents>

    </SfDropDownList>

</div>

  SfTooltip Status2 = new SfTooltip();

    public Boolean Status2isOpen { get; set; } = false;

    SfTooltip Status1 = new SfTooltip();

    public Boolean Status1isOpen { get; set; } = false;

public void Status2Open(Syncfusion.Blazor.DropDowns.PopupEventArgs args)
​{

    Status2isOpen = true;

 }

public void Status2Closed(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

{

    Status2.CloseAsync();

}

public void Status1Open(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

{

    Status1isOpen = true;

}

public void Status1Closed(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

{

    Status1.CloseAsync();

}

[Jafar Ali Shahulhameed]

Hi Daniel,

Based on the shared details we can understand that you are using Tooltip with Dropdown List component and facing an issue that Tooltip is displayed in the improper position. After validating your changes we created a sample similar to yours, but we cannot be able to replicate the issue from our end. We have also attached the sample for your reference.

We kindly suggest you to reach out to us with a sample replicating the issue you are facing along with clear replication procedure or kindly replicate your issue in our attached sample. This will assist us in further validating the query and providing you with a prompt solution.

Feel free to get back to us if you need further assistance.

Regards,

Jafar

Attachment: BlazorAppTooltip_a9c6edeb.zip

[Daniel Tujo]

In your solution you are creating two separate list objects with two different class'. For efficiency's sake I don't want to create two different class's rather just create two objects of the same class.

Attachment: BlazorAppTooltip_a9c6edeb_2e01644d.zip

[Jafar Ali Shahulhameed]

Hi Daniel,

On validating the shared sample further, we found that the issue is with the styling attributes due to the given class name. We replicated the issue in your sample and after removing the class “col-1” and making the changes below issue got resolved.

While using the mentioned class for the container the below styles are getting applied for that container. So, tooltip position and appearance got affected.

.col-1 {

    flex: 0 0 auto;

    width: 8.33333333%;

}

Kindly refer the code changes below to achieve your requirement, We have also attached sample for your reference.

<div class="row">

    <SfTooltip @ref="TooltipObj" ID="Tooltip" Target=".e-list-item .name[title]"></SfTooltip>

    <SfTooltip @ref="TooltipObj1" ID="Tooltip" Target=".e-list-item .name[title]"></SfTooltip>

    <SfDropDownList Width="200px" TItem="GameFields" TValue="string" @bind-Value="game" Placeholder="Select a game" DataSource="@Games">

        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

        <DropDownListTemplates TItem="GameFields">

            <ItemTemplate>

                <div class="name" title="@((context as GameFields).Text)"> @((context as GameFields).Text) </div>

            </ItemTemplate>

        </DropDownListTemplates>

        <DropDownListEvents TValue="string" TItem="GameFields" Opened="Status1Open" OnClose="Status1Closed"></DropDownListEvents>

    </SfDropDownList>

 

    <SfDropDownList Width="200px" TItem="GameFields" TValue="string" @bind-Value="game2" Placeholder="Select a game" DataSource="@Games1">

        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

        <DropDownListTemplates TItem="GameFields">

            <ItemTemplate>

                <div class="name" title="@((context as GameFields).Text)"> @((context as GameFields).Text) </div>

            </ItemTemplate>

        </DropDownListTemplates>

        <DropDownListEvents TValue="string" TItem="GameFields" Opened="Status2Open" OnClose="Status2Closed"></DropDownListEvents>

    </SfDropDownList>

</div>

Check out the shared details and get back to us if you need further assistance.

Regards,

Jafar

Attachment: BlazorAppTooltip_555a6279.zip