Clear button tooltip

[Pavel]

Hello, Id like to hover over the clear button and display text "clear selection".

I would like to add a title="clear selection" attribute to the clear button.

[UdhayaKumar Duraisamy]



Hi Pavel,

We are validating the requirement. We will update the details in two business days (19^th July 2022).

Regards,

Udhaya Kumar D.

[UdhayaKumar Duraisamy]

Hi Pavel,

We have prepared a sample for the requested requirement and shared the sample link below for your reference. Please refer the code snippet and documentation for more details.

 

@using Syncfusion.Blazor.DropDowns;

@using Syncfusion.Blazor.Popups;

 

<SfTooltip @ref="TooltipObj" ID="Tooltip" Target=".e-clear-icon" Content="Clear Selection">

</SfTooltip>

<SfMultiSelect TItem="GameFields" TValue="string[]" Placeholder="Select games" DataSource="@Games" HideSelectedItem="false">

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

    <MultiSelectTemplates TItem="GameFields">

        <ItemTemplate>

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

        </ItemTemplate>

    </MultiSelectTemplates>

    <MultiSelectEvents TValue="string[]" TItem="GameFields" Opened="OnOpen" OnClose="OnClose" ValueChange="@ValueChangeHandler"></MultiSelectEvents>

</SfMultiSelect>

 

@code {

    SfTooltip TooltipObj;

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

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    private List<GameFields> Games = new List<GameFields>() {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"},

    };

    public void OnOpen(PopupEventArgs args)

    {

        isOpen = true;

    }

    public void OnClose(PopupEventArgs args)

    {

        TooltipObj.CloseAsync();

    }

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (isOpen)

        {

            await TooltipObj.RefreshAsync();

        }

    }

    private void ValueChangeHandler(MultiSelectChangeEventArgs<string[]> args)

    {

        if(args.Value == null)

        {

            TooltipObj.CloseAsync();

        }

    }

}

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazMultiTooltip-1511956479

Documentation :

1. https://blazor.syncfusion.com/documentation/multiselect-dropdown/events
2. https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CloseAsync_Syncfusion_Blazor_Popups_TooltipAnimationSettings_
3. https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_RefreshAsync

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Udhaya Kumar D