tooltip on ejDropdownlist

[Luis Carlos]

Hi.

In the next image you can see the "ejDropdownlist" component, it's very short, so I you can't see the selected item. How can I add a tooltip in order to see the selected item? 

I will be awaiting for your reply, thanks in advance.

Kind regards, Luis.

[Prince Oliver]

Hi Luis, 

Thank you for contacting Syncfusion support. 

To display tooltip for dropdownlist’s selected value. You need to bind the tooltip control with the dropdownlist’s container. You can use the dropdownlist’s create event to render tooltip for dropdownlist’s container element. Kindly refer to the following code snippet. 

$('#bikeList').ejDropDownList({ 

        dataSource: BikeList, 

        width: "60px", 

        fields: { id: "empid", text: "text", value: "text" }, 

        create:"onCreate" 

    }); 

function onCreate() { 

  this.container.ejTooltip({ 

        content: this.model.value, 

        open: "onOpen" 

  }); 

} 

To show the current selected values on hovering you need to use the tooltip’s open event to add the selected item as content. Kindly refer to the following code snippet. 

function onOpen () { 

  var ddlObj= $('#bikeList').data("ejDropDownList"); 

  this.setModel({ content: ddlObj.model.value}); 

} 

We have prepared a sample for your convenience, kindly refer to the following link for the sample: http://jsplayground.syncfusion.com/qrvjjfqf 

Regards, 

Prince 

[Luis Carlos]

This solution sounds perfect! however I can't use the word "this", because I already use it for another thing, so, can you provide me another solution? please.

I will be awating for your reply, thanks again!

Kind regards, Luis.

[Prince Oliver]

Hi Luis, 

Thank you for your update. 

We have modified the sample as per your requirement without “this” qualifier. Kindly refer to the following code snippet. 

<input type="text" id="bikeList" /> 

 

<script type="text/javascript"> 

var ddlObj,tipObj; 

$(function () { 

    // declaration 

    BikeList = [ 

          { empid: "bk1", text: "Apache RTR" }, { empid: "bk2", text: "CBR 150-R" }, { empid: "bk3", text: "CBZ Xtreme" }, 

          { empid: "bk4", text: "Discover" }, { empid: "bk5", text: "Dazzler" }, { empid: "bk6", text: "Flame" }, 

          { empid: "bk7", text: "Fazzer" }, { empid: "bk8", text: "FZ-S" }, { empid: "bk9", text: "Pulsar" }, 

          { empid: "bk10", text: "Shine" }, { empid: "bk11", text: "R15" }, { empid: "bk12", text: "Unicorn" } 

    ];             

    $('#bikeList').ejDropDownList({ 

        dataSource: BikeList, 

      width: "60px", 

        fields: { id: "empid", text: "text", value: "text" }, 

      create:"onCreate" 

    }); 

}); 

//Dropdownlist's create event 

function onCreate() { 

  ddlObj= $('#bikeList').data("ejDropDownList"); // dropdownlist's object 

  //Rendering tooltip 

  ddlObj.container.ejTooltip({ 

        content: ddlObj.model.value, 

        open: "onOpen" 

  }); 

} 

//Tooltip's open event 

function onOpen () { 

  //Tooltip's object 

  tipObj= $('#bikeList_container').data("ejTooltip"); // "bikeList_container" is the id attribute for dropdownlist's container 

  // setting content for tooltip 

  tipObj.setModel({ content: ddlObj.model.value}); 

} 

</script> 

Kindly refer to the following link for the link for the Playground sample: http://jsplayground.syncfusion.com/ua2fffl0 

Regards, 

Prince 

[Luis Carlos]

Hi again.

I've been trying to adapt your code snippet to my project as you can see in the image 1, however, I couldn't solve the problem of the image 2. Could you help me with this problem? it seems that it doesn't recognise the function "ejTooltip".

Image 1

Image 2

I will be awating for your reply, thanks again!

Regards, Luis.

[Prince Oliver]

Hi Luis,   

  

Thank you for your update.   

  

The issue “ejTooltip is not a function” will occur only when tooltip widget is in accessible. We can try creating tooltip widget like the following code snippet.   

function onCreate() { 

  ddlObj= $('#bikeList').data("ejDropDownList"); 

   $(ddlObj.container).ejTooltip({ 

        content: ddlObj.model.value, 

        open: "onOpen" 

  }); 

} 

  

If the issue persists, please provide the script file which your using (i.e) “ej.web.all.min.js” file or individual script file for dropdownlist. 

Regards, 

Prince 

[Luis Carlos]

Hi again.

It wasn't fixed as you can see in the two next images, so the third image contains the file version. 

Image 1

Image 2

Image 3

If you need any further information, please let me know. Thanks again!

Regards, Luis Carlos.

[Prince Oliver]

Hi Luis, 

Thank you for your update. 

We have added ej.Tooltip control since 2016, volume 1 release (v14.1.0.41). Kindly refer to the following release notes link: https://help.syncfusion.com/js/release-notes/v14.1.0.41?type=features#ejtooltip 

So, it will not be available in the prior versions. We suggest you upgrade to the latest versions to use the tooltip control. This will fix the issue. 

Regards, 

Prince