1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. ToolTip and translation

ToolTip and translation

Hi support i have two questions:
1) how can i set the tooltip in JS2 ?
2) How can i found all the control's messages to set the translation in JS2?
Thanks
Stefano

7 Replies
SS Subha Shree Ramanathan Syncfusion Team June 29, 2018 12:09 PM UTC

Hi Stefano, 

Thanks for your interest in EJ2 Tooltip Component. 

Query 1: how can i set the tooltip in JS2 ? 
 
To render the Essential JS 2 Tooltip control, please refer the below getting started link. It will help you to know about the basic requirements, installation and configuration of Tooltip control.  


Refer to the below demo link to explore our Essential JS 2 Tooltip samples. 


For your convenience we have prepared a Plunker sample and attached below. Refer to the below sample link. 


Query 2: How can i found all the control's messages to set the translation in JS2?  
 
We can use setCulture method to change all Essential JS 2 components localization strings. Please find the below links for further details.  



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

Thanks, 
Subha Shree D.R 


SC Stefano Capobianco July 1, 2018 04:44 AM UTC

Tanks for your fast answer.

About the first question, your suggestion work very well. Now how can i set the tooltip for te droipdownlist ?

I use the following code:

    var statusDropDownListObj = new ej.dropdowns.DropDownList({
        dataSource: statusDM,
        fields: { text: 'StatusName', value: 'Id', id: 'Id' },
        placeholder: 'Selezionare lo stato del paziente',
        index: 0,
        width: "100%"
    });

    statusDropDownListObj.appendTo('#patientStatus');

    var ttPatientStatus = new ej.popups.Tooltip({
        //Set tooltip content
        content: 'Stato del paziente'
    });

    ttPatientStatus.appendTo('#patientStatus');

But nothing is showed.

About second question i use plain javascript and to achieve my goal i've found this code:


        <script type="text/javascript" id="loadCultureFiles">
            function loadCultureFiles(name) {
                var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];

                var loader = ej.base.loadCldr;

                var loadCulture = function (prop) {
                    var val, ajax;

                    ajax = new ej.base.Ajax(location.origin  + '/lib/cldr-data/main/' + name + '/' + files[prop], 'GET', false);

                    ajax.onSuccess = function (value) {
                        val = value;
                    };
                    ajax.send();
                    loader(JSON.parse(val));
                };
                for (var prop = 0; prop < files.length; prop++) {
                    loadCulture(prop);
                }
            }
        </script>

I need to recall them in all pages ?

One suggestion. Many peoples who use asp.net core like me, have many plain javascript and you don't have some documentation ( only typescript js es5 es6). I hope we can have fast the same in plain javascript and i suggest also to improve documentation (asp.net core side). I love your controls but it's not so easy to find the info's about using the controls.

Thanks in advance
Stefano

KT Karthick T Syncfusion Team July 2, 2018 10:54 AM UTC

Hi Stefano,   
  
Please find the response for your queries as below.   
  
Query 1: How can I set the Tooltip for Dropdown list?   
  
We have investigated the scenario with Tooltip and DropDownList, in which the DropdownList element hided and disabled the pointer-events, to overcome editing and blinging of dropdownlist element in IE11 browser to achieve read-only behavior. Since, the tooltip is not displayed for DropDownList control.   
  
We suggest you to set specific CSS class selector for DropDownList using cssClass property and append tooltip to that cssClass. Please refer to the below code snippet.   
  
//DropDownList rendering 
var statusDropDownListObj = new ej.dropdowns.DropDownList({ 
    dataSource: statusDM, 
    fields: { text: 'StatusName', value: 'Id', id: 'Id' }, 
    placeholder: 'Selezionare lo stato del paziente', 
    width: "100%", 
    index: 0, 
    cssClass: "patientStatus" //specific cssClass used for tooltip rendering 
}); 
 
statusDropDownListObj.appendTo('#patientStatus'); 
 
var ttPatientStatus = new ej.popups.Tooltip({ 
    //Set tooltip content 
    content: 'Stato del paziente' 
}); 
 
ttPatientStatus.appendTo('.patientStatus'); //DropDownList cssClass selector 
   
   
  
For your convenience, we have prepared sample for your reference. Refer to the below Plunker sample link.   
  
Sample   
  
Query 2: I need to recall them in all pages ?    
    
No, you can integrate the localization scripts in the main page (Views/Shared/_Layout.cshtml) which allows you to render the localization in all pages. The setCulture() function allows you to change the culture globally, hence it is not necessary to set the culture changes for individual components.    
    
Query 3: One suggestion. Many peoples who use asp.net core like me, have many plain javascript and you don't have some documentation ( only typescript js es5 es6). I hope we can have fast the same in plain javascript    
  
We have already included the details of localization and internationalization in the ASP.NET Core documentation and the same can be referred from the below links.    
  
  
Internationalization Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/base/intl.html    
    
Query 4: And i suggest also to improve documentation (asp.net core side). I love your controls but it's not so easy to find the info's about using the controls.    
    
Thanks for your valuable suggestion. We will make further improvements in our documentation and include this in our upcoming releases.    
    
Please let us know if you require any further assistance on this. 
 
Thanks, 
Karthick T 


SC Stefano Capobianco July 4, 2018 07:55 AM UTC

Hi Shuba, thanks for the answers. The ttoltip solution work very well with a DropDownList declared in a Javascript but when i try to use them in TagHelper context, this not work.

"                                                
<ejs-dropdownlist id="gender" created="genderCreate" change="genderChange"
                                                                  ejs-for="People.Gender.GenderName" locale="it" cssClass="genderTT">
     <e-dropdownlist-fields text="GenderName" value="Id" id="Id"></e-dropdownlist-fields>
</ejs-dropdownlist>

    var ttPatientGender = new ej.popups.Tooltip({
        //Set tooltip content
        content: 'Sesso'
    });

    ttPatientGender.appendTo('.genderTT');

"

Where i wrong ?

Thanks
Stefano

KT Karthick T Syncfusion Team July 5, 2018 06:48 AM UTC

Hi Stefano, 

We have analyzed your code snippet and found that Tooltip inside script tag was initialized before the initialization of DropDownList. So the target element (.genderTT) of tooltip at that time was not available on DOM. Since the tooltip was not displayed. 

We suggest you to initialize Tooltip on DOMContentLoaded event Handler. This event will be fired after the initialization of DropDownList. Refer to the below code snippet. 

<div> 
    <h1>EJ2 Tooltip demo</h1> 
   <ejs-dropdownlist id="gender" locale="it" cssClass="genderTT"> 
        <e-dropdownlist-fields text="GenderName" value="Id" id="Id"></e-dropdownlist-fields> 
    </ejs-dropdownlist> 
    <script> 
        document.addEventListener('DOMContentLoaded', function () { 
            var ttPatientGender = new ej.popups.Tooltip({ 
                //Set tooltip content 
                content: 'Sesso'                 
            }); 
 
            ttPatientGender.appendTo('.genderTT'); 
        }); 
    </script> 
</div> 
 

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

Thanks, 
Karthick T 


SC Stefano Capobianco July 5, 2018 08:08 AM UTC

Hi Karthick T thanks for your answer. Your solution work very well.
Stefano

KT Karthick T Syncfusion Team July 6, 2018 04:37 AM UTC

Hi Stefano, 

We are happy to hear that the provided solution worked at your end. 

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

Thanks, 
Karthick T 


Loader.
Up arrow icon