/
helpTexts.html.twig
135 lines (129 loc) · 5 KB
/
helpTexts.html.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
{% 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><empty></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><empty></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 %}