Help on Form Elements via Popovers

OSS-Framework provides jQuery functionality to add Bootstrap popovers on form elements.

When defining the form elements, if you add a special attribute with name data-oss-po-content, a Bootstrap icon-info-sign is added after the form element which, when clicked, will open a popover bubble.

Parameters

There are several parameters available:

• data-oss-po-content - sets popover content. Mandatory and the attribute which triggers the functionality.
• data-oss-po-title - sets title for popover. Optional, default value is false.
• data-oss-po-placement - sets placement for popover. Optional, default value is "top". Valid options: "top" | "bottom" | "left" | "right"
• data-oss-po-delay - sets popovers show and hide delay in milliseconds. Optional, default value is 0.
• data-oss-po-trigger - sets trigger hook. Optional, default is "click". Valid options: "click" | "hover" | "focus" | "manual"
• data-oss-po-animation - turns popover animation on or off. Optional, default is true. Valid options: "true" | "false"

Usage

To use this functionality make sure that proper JavaScript file is included.

Then, when creating form elements, add attributes to configure the popover functionality. For example:

$model = $this->createElement( 'text', 'model' );
$model->setRequired( false )
      ->setLabel( 'Model' )
      ->setAttr( 'data-oss-po-content', 
          'The make and model of your phone. For example: Samsung Galaxy S IV' )
      ->setAttr( 'data-oss-po-title', 'Phone Make / Model' )
      ->addFilter( 'StringTrim' )
      ->addFilter( new OSS_Filter_StripSlashes() );
$this->addElement( $model );

This example will create a model field with an information sign to the right. When the sign is clicked, a popover message appears with the provided information. To make popover show on hover with half second delay, add extra attributes:

$model->setAttr( 'data-oss-po-trigger', 'hover' )
      ->setAttr( 'data-oss-po-delay', 500 );