How to get Tooltipster to access data in a js array

Question

Using Tooltipster, I want to populate tooltips with words selected from a English/Thai glossary set up as a js 2D array. The intention is that as an English word is tooltipped it will be used to access and display the paired Thai word(s). All of this is in a modal dialog. Here is the html:

    <div id="modal_text">       
    <p id="modal_text01">The <span class="tooltip">boy</span>&#xa0;is&#xa0;<span class="tooltip">walking</span><span>&#xa0;</span><span class="tooltip" >home</span></p>

here is the js code (the array is set as a global variable)

    var eng_thai_glossary=[["the","คำนำหน้านามเจาะจง"], ["and","และ"], ...   ["dependent","ซึ่งพึ่งพา ผู้อาศัย"]];
    jQuery(document).ready(function () {
        "use strict";
        var modalIndex = "";
        var ws_dlog =  jQuery("div#ws_dialog").dialog({
        ...  /* dialog setup */
        jQuery("span.ws_dialog_icon").on("click",function(evnt) {
        evnt.stopPropagation();
        ws_dlog.dialog("open");
        jQuery("#ui-dialog-title-dialog").hide();
        jQuery(".ui-dialog-titlebar").removeClass('ui-widget-header');
        var elementId = evnt.target.id;
          modalIndex = elementId.substr(7);
        var  modalId = "modal_text" + modalIndex,
          modalText = document.getElementById(modalId).innerHTML;
        var ws_modal_html = '<div class = "ws_dialog_box"><p class = "ws_dialog_text">Here is the word in a sentence</p><p class="ws_dialog_thai">คำในประโยค</p><p class = "ws_dialog_sentence"></p><p><span class="fa fa-volume-up fa_volume_ws"></span></p></div>';
        ws_dlog.html(ws_modal_html);
        jQuery("div.ws_dialog_box p.ws_dialog_sentence").append(modalText);

        jQuery('span.tooltip').tooltipster({
          functionAfter: function(evnt) {
            var eng_word = jQuery(this).evnt.innerHTML,
            thai_word = "";
            for( var i=0; i<eng_thai_glossary.length; i++) {
              if(eng_thai_glossary[i][0] === eng_word)  {
                thai_word = eng_thai_glossary[i][1];
                return thai_word;
              }
            }
          }
        });
      });
      ...  /* audio code  */
    });  

Firebug shows the class "tooltipstered" is being added to the html indicating Tooltipster is being initialized. I'm a bit lost beyond this point. I'm not sure whether functionAfter is the right way to go here, or any of the other code for that matter. Any advice would be most welcome

Answer 1

OK, this is the solution I arrived at for the above issue. Pretty standard stuff, I guess. The toLowerCase method covers the English convention of capitalizing the first character of a sentence.

    jQuery('span.tooltip').tooltipster({
      functionBefore: function(origin, continueTooltip)  {
        var eng_word = jQuery(origin).text().toLowerCase(),
        thai_word = "",
        gloss_length = eng_thai_glossary.length;
        for(var i=0; i<gloss_length; i++){
          if(eng_thai_glossary[i][0] === eng_word)  {
            thai_word = eng_thai_glossary[i][1];
            break;
          }
        }
        origin.tooltipster( "content",  thai_word);
        continueTooltip();
       }
    });