Mopa bootstrap example help texts

Block help text, can inlude HTML formatting

block help

Various help text options are available.

Using the twitter bootstrap framework there are two additional options for displaying help texts in form_row: tooltip and popover.

So for each form_row you could decide to have

help_block
display the help text as an extra block below the form_row
help_label
display the help text below the form_row label
help_label_tooltip
display the help text on hover of defined icon as tooltip
JS-include necessary make sure, that twitters tooltip.js is included in base.html and the initialization part of the javascript in foot_script_additional is included
help_label_popover
display the help text on hover of defined icon including the title and additional content with optional HTML as popover
JS-include necessary make sure, that twitters popover.js is included in base.html and the initialization part of the javascript in foot_script_additional is included

Options

help_label_tooltip

option description default
title

will be shown as tooltip / popover title

<empty>
placement

where to show the tooltip / popover, allowed options are
top
right
bottom
left

top
icon

css class name of icon to be used for tooltip / popover trigger e.g. twitters icon-xx-classes

icon-info-sign

help_label_popover

Same as for help_label_tooltip and additionally

option description default
content

will be shown as popover body, text defined here could contain HTML.

As all content rendered here is raw HTML beware of XSS.
<empty>

Combining help options

All options for help texts can be used side by side. Not that that would make too much of a sense but there might be a reason for having a simple inline help text and additionally a popover text giving some more verbose instructions.

FormType Code

// ExampleHelpTextFormType.php

<?php
namespace Mopa\Bundle\BootstrapSandboxBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class ExampleHelpTextFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('textfield_block', 'text', array(
                'label' => "Block Label name",
                'help_block' => 'Block help text, can inlude <strong>HTML formatting</strong>',
                'attr' => array(
                    'placeholder' => "Some text",
                )
            ))
            ->add('textfield_label', 'text', array(
                'label' => "Label help",
                'help_label' => 'Label help text',
                'attr' => array(
                    'placeholder' => "Some text",
                )
            ))
            ->add('textfield_label_tooltip', 'text', array(
                'label' => "Label tooltip help",
                'help_label_tooltip' => array(
                    'title' => 'Label tooltip text',
                ),
                'attr' => array(
                    'placeholder' => "Some text",
                )
            ))
            ->add('textfield_label_tooltip_noicon', 'text', array(
                'label' => "Label tooltip help",
                'help_label_tooltip' => array(
                    'title' => 'Label tooltip text',
                    'text' => 'help?',
                    'icon' => false,
                ),
                'attr' => array(
                    'placeholder' => "Some text",
                )
            ))

            ->add('textfield_label_popover', 'text', array(
                'label' => "Label popover help",
                'help_label_popover' => array(
                    'title' => 'Label popover title',
                    'content' => 'Content for popover help, can include <strong>HTML</strong>'
                ),
                'attr' => array(
                    'placeholder' => "Some text",
                )
            ))
            ->add('textfield_label_popover_options', 'text', array(
                'label' => "Label popover help right aligned, different icon",
                'help_label_popover' => array(
                    'title' => 'Label popover title to the right',
                    'placement' => 'right',
                    'icon' => 'ok-sign',
                    'content' => 'Content for popover help, can include <strong>HTML</strong>'
                ),
                'attr' => array(
                    'placeholder' => "Some text",
                )
            ))
            ->add('textfield_combined', 'text', array(
                'label' => "Combined label",
                'help_block' => 'block help',
                'help_label' => 'label help',
                'help_label_tooltip' => array(
                    'title' => 'help tooltip text'
                ),
                'help_label_popover' => array(
                    'title' => 'help popover text',
                    'content' => 'beautiful, isn\'t it?'
                ),
                'attr' => array(
                    'placeholder' => "Some text",
                )
            ))

            ->add('textfield_wiget_help', 'text', array(
                'label' => "Help right of widget",
                'help_widget_popover' => array(
                    'title' => 'help popover text',
                    'content' => 'beautiful, isn\'t it?'
                ),
                'attr' => array(
                    'placeholder' => "Some text",
                )
            ))
        ;
    }
    public function getName()
    {
        return 'mopa_bootstrap_example_help_texts';
    }
    public function getButtonValue()
    {
        return ""; # return here the name of the route the form should point to
    }
}

Template Code

{# MopaBootstrapSandboxBundle:Examples:helpTexts.html.twig #}

{% extends "MopaBootstrapSandboxBundle::layout.html.twig" %}
{% from 'MopaBootstrapBundle::flash.html.twig' import session_flash %}

{% block headline %}Help Texts{% endblock headline %}

{% block content %}
<div class="row">
    <div class="col-lg-6">
        <form class="form-horizontal well">
              {{ form_widget(form) }}
              <button type="submit" class="btn">Submit</button>
        </form>
    </div>
    <div class="col-lg-6">
        <h3>Various help text options are available.</h3>
        <p>
            Using the twitter bootstrap framework there are two additional
            options for displaying help texts in form_row:
            <strong>tooltip</strong> and <strong>popover</strong>.
        </p>
        <p>So for each form_row you could decide to have</p>
        <dl class="dl-horizontal">
            <dt>help_block</dt>
            <dd>
                display the help text as an extra block
                below the form_row
            </dd>
            <dt>help_label</dt>
            <dd>
                display the help text below the form_row label
            </dd>
            <dt>help_label_tooltip</dt>
            <dd>
                display the help text on hover of defined icon
                as tooltip<br />
                <span class="label label-info">JS-include necessary</span>
                make sure, that twitters tooltip.js is included in base.html
                and the initialization part of the javascript
                in foot_script_additional is included
            </dd>
            <dt>help_label_popover</dt>
            <dd>
                display the help text on hover of defined icon
                including the title and additional content with optional HTML
                as popover<br />
                <span class="label label-info">JS-include necessary</span>
                make sure, that twitters popover.js is included in base.html
                and the initialization part of the javascript
                in foot_script_additional is included
            </dd>
        </dl>

        <h4>Options</h4>
        <p><strong>help_label_tooltip</strong></p>
        <table class="table table-condensed table-bordered">
            <thead>
                <tr>
                    <th>option</th>
                    <th>description</th>
                    <th>default</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>title</td>
                    <td>
                        <p>will be shown as tooltip / popover title</p>
                    </td>
                    <td>&lt;empty&gt;</td>
                </tr>
                <tr>
                    <td>placement</td>
                    <td>
                        <p>
                            where to show the tooltip / popover, allowed
                            options are <br />
                            <i class="icon-chevron-right"></i> top<br />
                            <i class="icon-chevron-right"></i> right<br />
                            <i class="icon-chevron-right"></i> bottom<br />
                            <i class="icon-chevron-right"></i> left
                        </p>
                    </td>
                    <td>top</td>
                </tr>
                <tr>
                    <td>icon</td>
                    <td>
                        <p>
                            css class name of icon to be used for tooltip
                            / popover trigger e.g. twitters icon-xx-classes
                        </p>
                    </td>
                    <td>icon-info-sign</td>
                </tr>
            </tbody>
        </table>

        <p><strong>help_label_popover</strong></p>
        <p>Same as for help_label_tooltip and additionally</p>
        <table class="table table-condensed table-bordered">
            <thead>
                <tr>
                    <th>option</th>
                    <th>description</th>
                    <th>default</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>content</td>
                    <td>
                        <p>will be shown as popover body, text defined here
                        could contain HTML.</p>
                        <div class="alert alert-warning">
                            As all content rendered here is raw HTML beware
                            of XSS.
                        </div>
                    </td>
                    <td>&lt;empty&gt;</td>
                </tr>
            </tbody>
        </table>

        <h4>Combining help options</h4>
        <p>
            All options for help texts can be used side by side. Not that
            that would make too much of a sense but there might be a reason for having
            a simple inline help text and additionally a popover text
            giving some more verbose instructions.
        </p>
    </div>
</div>
{% endblock content %}

{% set showTemplate = _self %}{% set showForm = formType %}
Fork me on GitHub