Tooltip not support elegant theme

 
1
0
-1

Hi, im using map app download from marketplace and change the theme to elegant but tooltip not appear.

Can you help?

Thanks.

    CommentAdd your comment...

    4 answers

    1.  
      2
      1
      0

      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:

      $( document ).uitooltip({
            items: "input,textarea"

      I hope this helps
        CommentAdd your comment...
      1.  
        1
        0
        -1

        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.

          CommentAdd your comment...
        1.  
          1
          0
          -1

          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).

          1. listenwell

             

            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.

             

          2. Bastiana

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

          CommentAdd your comment...
        2.  
          1
          0
          -1

          Try this - Add jQuery Tooltip to form

            CommentAdd your comment...