Feature Available in Joget DX

This article has been superceded as it is available as part of the product itself without the need of custom code. Please refer to Builder Advanced Tools#Tooltip.

  1. Use the following code to incorporate jQuery Tooltip into the form. Add a Custom HTML and add in the following code. Amend accordingly.

    <script type="text/javascript">
    $(function() {
    
    //customize your hints here by specifying form element ID on the left and message on the right
    messages = { 'title' : 'Key in a suitable title',
                'remark' : 'Extra note goes here'};
     
    //do not modify anything below here.
    $( document ).tooltip({
          items: "input",
          content: function() {
            var element = $( this );
            if( messages[$(element).attr("name")] ){
              return messages[$(element).attr("name")];
            }else{
              return false;
            }
          }
        });
        
    });
    </script>
  2. The next time when someone hover over the field, the hint will show up.



     

Reference: http://api.jqueryui.com/tooltip/


Related Elements




  • No labels