Multiselect with Checkbox - Show tool tip for long text options on hover

[tarannum]

Hi 

Is there a way to show tooltips on hover of the options in a multiselect textbox.

I have  a model with Code, Description and ID. I am able to display and bind the properties, but i need to show a tooltip for options on hover. Please see code below:

<div class="form-group">

<SfMultiSelect TValue="int[]" TItem="MyObjModel" ShowSelectAll=true @bind-Value="currObj.Selected"

                       SelectAllText="Select All" UnSelectAllText="Unselect all"

                       Mode="VisualMode.CheckBox" Placeholder="Select a value"

                       DataSource="@productGroupCodes" AllowFiltering="true" ShowDropDownIcon="true" CssClass="dropdownFont ">

            <MultiSelectFieldSettings Text="Code" Value="Id"> </MultiSelectFieldSettings>

            <MultiSelectEvents TValue="int[]" TItem="MyObjModel" ValueChange="@((args)=>OnDataChange(args, currObj))"></MultiSelectEvents>

            <MultiSelectTemplates TItem="MyObjModel">

                <ItemTemplate Context="items">

                    @{

                        var item = (items as MyObjModel);

                        <span> @(item.Code) - @(item.Description)</span>

                    }

                </ItemTemplate>

            </MultiSelectTemplates>

        </SfMultiSelect>

</div>

Model:

    public class MyObjModel 

    {

        public int Id { get; set; }

        public int Code { get; set; }

        public string Description { get; set; }

    }

Please let me know if there is a way to do it.

Regards

tchoujar

[Sevvandhi Nagulan]

Hi Tarannum, 

Greetings from Syncfusion support. 

We checked your query. You can achieve this behavior by using tooltip component. When the mouse is hovered over the DropDownList option, a tooltip appears with information about the hovered list item. Refer the below code. 

 

@using Syncfusion.Blazor.DropDowns; 

@using Syncfusion.Blazor.Popups; 

 

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

</SfTooltip> 

<SfMultiSelect TItem="GameFields" TValue="string[]" Placeholder="Select games" DataSource="@Games" Width="200px" PopupWidth="200px" Mode="VisualMode.CheckBox"> 

    <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"></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.Close(); 

    } 

    protected override async Task OnAfterRenderAsync(bool firstRender) 

    { 

        if (isOpen) 

        { 

            await TooltipObj.Refresh(); 

        } 

    } 

} 

Screenshot:  

 

Please find the sample below. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_tooltip1164020391 

UG link: https://blazor.syncfusion.com/documentation/multiselect-dropdown/how-to/tooltip/ 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N