How to add tooltips to the Items in a Syncfusion ListBox

When working with Syncfusion’s ListBox component, you may want to provide additional information to users when they hover over items. This can be achieved by using the
beforeItemRender event to customize the rendering of each item. Below is a guide on how to implement tooltips that display the abbreviation of each item in the ListBox.

Setting up the ListBox

First, you need to define the ListBox in your Razor view file (Index.cshtml). Here’s how you can set up two ListBoxes with a beforeItemRender event:

<div class="control-section">
    <div class="dual-list-wrapper">
        <div class="dual-list-groupa">
            <h4>Group A</h4>
            <ejs-listbox id="listbox1" scope="#listbox2" dataSource="ViewBag.groupA" height="330px" beforeItemRender="onBeforeItemRender"
                         noRecordsTemplate="@Html.Raw("<div class='e-list-nrt'><span>NO DATA AVAILABLE</span></div>")">
                <e-listbox-fields text="Name" value="Abbrevation"></e-listbox-fields>
                <e-listbox-toolbarSettings items="ViewBag.items">
                </e-listbox-toolbarSettings>
            </ejs-listbox>
        </div>
        <div class="dual-list-groupb">
            <h4>Group B</h4>
            <ejs-listbox id="listbox2" dataSource="ViewBag.groupB" height="330px" beforeItemRender="onBeforeItemRender"
                         noRecordsTemplate="@Html.Raw("<div class='e-list-nrt'><span>NO DATA AVAILABLE</span></div>")">
                <e-listbox-fields text="Name" value="Abbrevation"></e-listbox-fields>
            </ejs-listbox>
        </div>
    </div>
</div>

Adding the JavaScript function

Next, include the JavaScript function that will be triggered for beforeItemRender event. This function will set the title attribute of the list item element, which is used for tooltips:

<script>
    function onBeforeItemRender(args) {
        args.element.title = args.item.Abbrevation;
    }
</script>

Configuring the Controller

In your HomeController.cs, you need to populate the ViewBag with the data for the ListBoxes and the toolbar settings:

public IActionResult Index()
{
    // Define the toolbar items
    string[] items = new string[] { "moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom" };
    ViewBag.items = items;

    // Populate Group A
    ViewBag.groupA = new List<object>
    {
        new { Name = "Australia", Abbrevation = "AU" },
        // ... other countries
    };

    // Populate Group B
    ViewBag.groupB = new List<object>
    {
        new { Name = "India", Abbrevation = "IN" },
        // ... other countries
    };

    return View();
}

Conclusion

By following the steps above, you can easily add tooltips to items in a Syncfusion ListBox using the beforeItemRender event. This enhances the user experience by providing quick information without cluttering the UI.

Additional References

• Syncfusion ListBox Documentation: https://help.syncfusion.com/aspnet-core/listbox/getting-started
• Syncfusion ListBox API Reference: https://help.syncfusion.com/cr/aspnet-core/Syncfusion.EJ2.DropDowns.ListBox.html
• JavaScript Tooltip API: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title