Adding bootstrap tooltip to field label in editor

mfitportal

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]

allan

Hi,

You need to initialise the tooltip as Bootstrap doesn't automatically detect it. Something like:

$('[data-toggle="tooltip"]', editor.field('users_cues.CueAudioURL').node()).tooltip();

should do it.

Allan

mfitportal

I've added the initialization, however the tooltip isn't showing up. I load jquery as well as bootstrap and popper before loading the editor file. I've put the tooltip initialization in a function for when the editor opens it initializes the tooltips.

editor.on('open', function(){`
  `$('[data-toggle="tooltip"]', editor.field('users_cues.CueImageURL').node()).tooltip();`
  `$('[data-toggle="tooltip"]', editor.field('users_cues.CueAudioURL').node()).tooltip();`

`});

mfitportal

Update: It is now showing, thank you Alan

mfitportal

Update to the previous update, its showing once I open the editor and the close it. Once I reopen it again it displays how it should. Is there a way to get it to load properly the first time around?

colin

Hi @mfitportal ,

You could try the preOpen, this is called before the form is opened.

Cheers,

Colin

allan

You've got the code in an open listener, so yes, the tooltips would only be initialised once the Editor modal has been displayed.

Just remove the event listener. Have it initialise immediately after the Editor creation.

Allan

mfitportal

Hi Allan,
I've removed the event listener, however once I open the editor, it is not displaying the tooltip as I expected. I added those two lines of code for the tooltip directly after everything for the editor variable has be initialized.

washuit-iamm

@mfitportal Just curious, what are you using that uses the dragDrop for a field?

mfitportal

@washuit-iamm The dragDrop field is there so that the drag-drop feature is not enabled in the editor.

colin

Hi @mfitportal ,

Would you be able to modify this example here, please, to demonstrate the problem. Then we'd have something to work with and diagnose.

Cheers,

Colin