Adding bootstrap tooltip to field label in editor

Adding bootstrap tooltip to field label in editor

mfitportalmfitportal Posts: 20Questions: 7Answers: 0
edited January 2019 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]

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • mfitportalmfitportal Posts: 20Questions: 7Answers: 0
    edited January 2019

    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();`
    
    `});
    
  • mfitportalmfitportal Posts: 20Questions: 7Answers: 0

    Update: It is now showing, thank you Alan :D

  • mfitportalmfitportal Posts: 20Questions: 7Answers: 0

    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?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @mfitportal ,

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

    Cheers,

    Colin

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • mfitportalmfitportal Posts: 20Questions: 7Answers: 0

    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-iammwashuit-iamm Posts: 84Questions: 32Answers: 1

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

  • mfitportalmfitportal Posts: 20Questions: 7Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

This discussion has been closed.