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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

tooltip on ejDropdownlist

Thread ID:

Created:

Updated:

Platform:

Replies:

131565 Jul 17,2017 09:43 AM UTC Jul 21,2017 06:03 AM UTC JavaScript 7
loading
Tags: ejDropDownList
Luis Carlos
Asked On July 17, 2017 09:43 AM UTC

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 [Syncfusion]
Replied On 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 


Luis Carlos
Replied On 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.


Prince Oliver [Syncfusion]
Replied On 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 


Luis Carlos
Replied On 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.


Prince Oliver [Syncfusion]
Replied On 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 


Luis Carlos
Replied On 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.


Prince Oliver [Syncfusion]
Replied On 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 




CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;