Adding bootstrap tooltip to field label in editor

I've been trying to incorporate the bootstrap tooltip into the editor field's label for an upload field so that the users can know what type of file to use. However I'm running into the issue of calling the tooltip method. I've tried placing the function is almost all places in the document. At this point I'm clueless as to where or how to call this function to get the tooltips turn on. This is the code for the editor.

[code]
editor = new $.fn.dataTable.Editor({
ajax: '../models/user_adminCue_models.php',
//dataType: 'json',
table: '#users_cues',
fields: [ { label: "Cue Audio Upload <i id = \"AudioTT\"data-toggle=\"tooltip\" title=\"Supported upload types: .mp3, .wav\" class=\"fas fa-info-alt\"></i><span class='red-text'>*</span>",
name: "users_cues.CueAudioURL",
type: "upload",
clearText: 'Remove file',
attr:{
required: true
},
dragDrop: false,
display: function (val,row) {
return "<a href=\""+val.replace("..","../MAMRT")+"\">"+val.substring(val.indexOf("/",3)+1,val.length)+"</a>";
}

  },
  { label: "Cue Image Upload <span class='red-text'>*</span><i id = \"ImageTT\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Supported upload types: .mp3, .wav\" class=\"fas fa-info-alt\"></i> ",
    name:  "users_cues.CueImageURL",

    type: "upload",
    clearText: 'Remove file',
    attr:{
      required: true
    },
    dragDrop: false,
             display: function (val,row) {
              return "<a href=\""+val.replace("..","../MAMRT")+"\">"+val.substring(val.indexOf("/",3)+1,val.length)+"</a>";
     }
  }

]
});
[/code]