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.

FIXME: This documentation was written before the JS files where committed but they should reside in this directory.

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