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