Try this - Add jQuery Tooltip to form

I already know about using jquery for tooltip. The problem now it was not support when my apps using theme elegant. Tooltip jquery not working in theme elegant (provide by joget).

As you can see above picture, tooltip look fine in preview.

But wthen to the real app it doen not appear. This using elegant theme.

Try to bring up the developer console to see if there's any error.

Hi Listenwell

All the themes are different in some ways.

For example, a direct comparison of the runtime web source between the "Elegant" and "v3 Default" Theme shows that Elegant theme has the following codes, which v3 Default does not have, and this could have affected the tooltip jquery:

^{<link href="/jw/wro/bootstrap_theme_commons.css" rel="stylesheet" />
<script src="/jw/js/bootstrap/js/bootstrap.min.js"></script>
<link href="/jw/wro/elegant_theme.min.css" rel="stylesheet" />
<script src="/jw/wro/elegant_theme.min.js"></script>}

Encourage you to develop your own Joget Workflow themes, here is a guide from the Knowledge Base.

Hi listenwell,

This has been asked before and any theme that uses bootstrap will render the standard Jquery tooltip script example useless.

Here is what I did to make it work:

1. Add this code in your Userview Settings --> Custom Javascript configuration:

   $.widget.bridge('uitooltip', $.ui.tooltip);
   $.widget.bridge('uibutton', $.ui.button);

2. Change the code example from Add jQuery Tooltip to form to something like:

   <script type="text/javascript">
   $(document).ready(function() {
    
   //customize your hints here by specifying form element ID on the left and message on the right
   messages = { 'Author' : 'Person who raised the risk',
               'DateIdentified' : 'Date when the risk was identified'
               };
     
   //do not modify anything below here.
   $( document ).uitooltip({
         items: "input,textarea",
         content: function() {
           var element = $( this );
           if( messages[$(element).attr("name")] ){
             return messages[$(element).attr("name")];
           }else{
             return false;
           }
         }
       });
        
   });
   </script>

These lines are the key: