We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

tooltip on ejDropdownlist

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.



7 Replies

PO Prince Oliver Syncfusion Team July 18, 2017 11:37 AM UTC

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 



LC Luis Carlos July 18, 2017 12:55 PM UTC

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.



PO Prince Oliver Syncfusion Team July 19, 2017 04:32 AM UTC

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 



LC Luis Carlos July 19, 2017 07:25 AM UTC

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.



PO Prince Oliver Syncfusion Team July 20, 2017 07:13 AM UTC

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 



LC Luis Carlos July 20, 2017 09:57 AM UTC

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.



PO Prince Oliver Syncfusion Team July 21, 2017 06:03 AM UTC

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 




Loader.
Live Chat Icon For mobile
Up arrow icon