Multiselect Dropdown Items Tooltip

[Mangala Thippaiah]

I need a way to add tooltip to list items in a multiselect dropdown.  I see examples where you can add tooltip to dropdownlist control.  If I try to do the same for multiselect, it does not work.  Is there a way to achieve tooltip for multiselect control.  This control is not on a grid.

[Berly Christopher]

Hi Mangala Thippaiah, 

  

Greetings from Syncfusion support. 

  

We can show the tooltip for the multiselect items in the popup as mentioned in the below code example. 

  

<ejs-multiselect id="games" close="onClose" dataSource="@ViewBag.data" width="250px" placeholder="Select a game" popupHeight="220px" mode="Box"></ejs-multiselect> 

<script> 

    var tooltip = new ej.popups.Tooltip({ 

        // default content of tooltip 

        content: 'Select Countries', 

        // set target element to tooltip 

             target: '.e-list-item,.e-delim-values', 

        // set position of tooltip 

        position: 'TopCenter', 

        // bind beforeRender event 

        beforeRender: onBeforeRender 

    }); 

    tooltip.appendTo('body'); 

    function onBeforeRender(arg) { 

    var result = document.getElementById("games").ej2_instances[0].dataSource; 

    for (var i = 0; i < result.length; i++) { 

      this.content = arg.target.textContent; 

      this.dataBind(); 

      break; 

    } 

  } 

 function onClose(e) { 

  tooltip.close(); 

} 

 

  

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

  

Regards, 

Berly B.C 

[Mangala Thippaiah]

Thank you for your reply.

My scenario is a little bit different.

I have three columns in my data source - text, value, tooltip.  The multiselect two fields are assigned to Text and Value fields .  I want to assign the tooltip value to tooltip.  

I have tried the below code.  Error says object is undefined.

Also tooltip appears on all dropdown in the page.  I want it only for the below control

<ejs-multiselect id="multiselect" dataSource="@ViewBag.data" cssClass="e-custom-class" mode="CheckBox"

                                             close="onClose"

                                             changeOnBlur="false" placeholder="Select"

                                             showSelectAll="true" showDropDownIcon="true"

                                             filterBarPlaceholder="Search" popupHeight="350px">

                                <e-multiselect-fields text="Text" value="Value"></e-multiselect-fields>

                            </ejs-multiselect>

        var tooltip = new ej.popups.Tooltip({

            content: 'Loading',

            target: '.e-list-item,.e-delim-values',

            position: 'TopCenter',

            beforeRender: onBeforeRender

        });

        tooltip.appendTo('body');

function onBeforeRender(arg) {

        var result = document.getElementById("multiselect").ej2_instances[0].dataSource;

            for (var i = 0; i < result.length; i++) {

              //this.content = arg.target.tooltip;

              this.content = arg.target.ToolTip;

              this.dataBind();

              break;

            }

        }

        function onClose(e) {

            tooltip.close();

        }

[Berly Christopher]

Hi Mangala Thippaiah, 

  

Query 1: 

  

I have three columns in my data source - text, value, tooltip.  The multiselect two fields are assigned to Text and Value fields .  I want to assign the tooltip value to tooltip.   

  

Response: 

  

We can achieve the requested requirement as mentioned below code example. 

  

for (var i = 0; i < result.length; i++) { 

        if(arg.target.textContent == result[i].Text){ 

      this.content = result[i].TooltipContent; 

      this.dataBind(); 

      break; 

        } 

    } 

public class TooltipData 

    { 

        public string Value { get; set; } 

        public string Text { get; set; } 

        public string TooltipContent { get; set; } 

 

        public List<TooltipData> TooltipList() 

        { 

            List<TooltipData> tooltipdata = new List<TooltipData>(); 

            tooltipdata.Add(new TooltipData { Value = "Game1", Text = "AF", TooltipContent= "American Football" }); 

            tooltipdata.Add(new TooltipData { Value = "Game2", Text = "BD", TooltipContent = "Badminton" }); 

            tooltipdata.Add(new TooltipData { Value = "Game3", Text = "BB", TooltipContent = "Basketball" }); 

            tooltipdata.Add(new TooltipData { Value = "Game4", Text = "GF", TooltipContent = "Golf" }); 

            return tooltipdata; 

        } 

    } 

 

  

Query 2: 

  

Also tooltip appears on all dropdown in the page.  I want it only for the below control 

  

Response: 

  

We can achieve the requested requirement with help of cssClass property as mentioned in the below code example. 

  

<ejs-multiselect id="games" close="onClose" cssClass="customdrop" dataSource="@ViewBag.data" width="250px" placeholder="Select a game" popupHeight="220px" mode="Box"> 

           <e-multiselect-fields value="Value" text="Text"></e-multiselect-fields> 

</ejs-multiselect> 

var tooltip = new ej.popups.Tooltip({ 

        // default content of tooltip 

        content: 'Select Countries', 

        // set target element to tooltip 

             target: '.customdrop .e-list-item,.customdrop .e-delim-values', 

        // set position of tooltip 

        position: 'TopCenter', 

        // bind beforeRender event 

        beforeRender: onBeforeRender 

    }); 

    tooltip.appendTo('body'); 

 

  

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

  

Regards, 

Berly B.C 

[Mangala Thippaiah]

Thank you for your prompt reply.  Your solution worked like a charm.

[Berly Christopher]

Hi Mangala, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C