Multiple dropdownlists with tooltips

[Jeff Butterworth]

You have this example on how to add a tooltip to a dropdown.

https://ej2.syncfusion.com/vue/documentation/drop-down-list/how-to/tooltip/

This works if there is one dropdown but fails if there is more than one.

This code adds the tooltip for ".e-list-item". If you have multiple dropdowns, they all have e-list-item and so will be triggered for each dropdown when you hover over the dropdown list. Because dropdowns are implemented in a separate div, I don't see how you can make target anymore specific so I could have separate tooltips for each dropdown.

 onDropdownCreate:  function(args) {
            this.tooltip = new Tooltip({
            // default content of tooltip
                content: 'Loading...',
                // set target element to tooltip
                target: '.e-list-item',
                // set position of tooltip
                position: 'top center',
                // bind beforeRender event
                beforeRender: this.onBeforeRender
            });
            this.tooltip.appendTo('body');
        }

Then in this code, you are looking up the data for this.$refs.ddlObj.dataSource. But what if the beforeRender has fired from a different dropdown? The datasource will be different for different dropdowns. However, I can't see anyway in args that I can tell what dropdown it has come from so I can use the correct data source.  

onBeforeRender : function(args) {
            var result = this.$refs.ddlObj.dataSource;
            var i;
            for (i = 0; i < result.length; i++) {
                if (result[i].text === args.target.textContent) {
                    this.tooltip.content = result[i].content;
                    this.tooltip.dataBind();
                    break;
                }
            }
        },

And this bit of code, never seems to fire. Don't know what it is for:

onClose: function(e) {
            this.tooltip.close();
        },

So how can I have tooltips work when I have multiple dropdowns?

Thanks

Jeff

[Deepak Ramakrishnan]

Hi Jeff,  

 

Greetings from Syncfusion support.  

 

We will check and update the details in two business days (20^th July 2021). We appreciate your patience until then.  

 

Regards,  

Deepak R. 

[Deepak Ramakrishnan]

Hi Jeff, 

 

Thanks for your patience. 

 

 We have checked the reported issue and found that the documentation is suitable only when custom content is provided for the tooltip , Otherwise you can bind tooltip content as target text content. Kindly refer the sample which creates seperate tooltip control instance for every dropdown. 

 

[Template] : 

<template> 

  <div id="app"> 

    <div id='container' style="margin:50px auto 0; width:250px;"> 

        <br> 

            <ejs-dropdownlist :width= '100' :created='onDropdownCreate' :dataSource='countryData' :fields='fields' :close='onClose' placeholder='Select a country'> 

            </ejs-dropdownlist> 

             <ejs-dropdownlist  :created='onDropdownCreate' :dataSource='countryData' :fields='fields' :close='onClose' placeholder='Select a country'> 

            </ejs-dropdownlist> 

    </div> 

  </div> 

</template> 

 

 

[methods]: 

 

 methods: { 

        onClose: function(e) { 

            this.tooltip.close(); 

        }, 

        onBeforeRender : function(args) { 

          this.tooltip.content = args.target.textContent; 

        }, 

        onDropdownCreate:  function(args) { 

            this.tooltip = new Tooltip({ 

            // default content of tooltip 

                content: 'Loading...', 

                // set target element to tooltip 

                target: '.e-list-item', 

                // set position of tooltip 

                position: 'top center', 

                // bind beforeRender event 

                beforeRender: this.onBeforeRender 

            }); 

            this.tooltip.appendTo('body'); 

        } 

    }   

 

 

Sample : https://www.syncfusion.com/downloads/support/forum/167311/ze/quickstart1697192067 

 

 

Thanks, 

Deepak R. 

[Jeff Butterworth]

This almost worked. I found I had to wrap this code in onDropdownCreate() with an if test otherwise when I had more than one dropdown there were multiple tooltips getting created and appended to body. But otherwise excellent!

if (!this.tooltip) {                

    this.tooltip = new ej.popups.Tooltip({                    

        // default content of tooltip                    

        content: 'Loading...',                    

        // set target element to tooltip                    

        target: '.e-list-item',                    

        // set position of tooltip                    

        position: 'top center',                    

        // bind beforeRender event                    

       beforeRender:this.onBeforeRender                

    });                

    this.tooltip.appendTo('body');            

}

[Deepak Ramakrishnan]

Hi Jeff, 

 

 

Thanks for sharing your solution. 

 

We are always happy to assist you, If you need any further assistance on this. 

 

 

Thanks, 

Deepak R.