Adding a tooltip

Some auto-generated form layouts already include a tooltip by default, for example Bootstrap 3 and Uikit - the tooltip description is inherited from the description property of your field.

How can I add a tooltip to the RSform!Pro fields ?

This example is for Bootstrap 2 and you will have to follow the instructions below:

  • Add the following line in the Addition Attributes area of a field:
  •           data-toggle="tooltip" title="first tooltip"
    
  • Head over to your Javascript section (Form Properties > Javascript) and insert the following snippet (this will enable all tooltips in the form):
  •             <script>
                jQuery(function() {
                    jQuery('[data-toggle="tooltip"]').tooltip();
                });
                </script>
    

Please note that you can use different options such as positions (by adding the data-placement attribute it can take top / bottom / left / right ), animations, delays, html, delegated selectors, triggers and container. You can find out more in the official bootstrap 2 documentation

Example: data-toggle="tooltip" title="first tooltip" data-placement:"right"

Keep in mind that this method of applying tooltips is Bootstrap and jQuery dependent. Please make sure that these 2 libraries are loaded on your webpage.


12 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that

You Should Also Read

How do I remove the form title ? HOT