1======= Callouts ======
2
3~~NOTOC~~
4
5<callout type="question" icon="true">
6=== What is the Callout component ? ===
7The Bootstrap documentation has really nice callouts to draw attention to important information, but for some reason these callouts are not included in the actual Bootstrap distribution.
8
9This plugin include the original Callout from Bootstrap documentation for //info//, //warning// and //danger// and the extension for //default//, //success// and //primary// from http://cpratt.co/twitter-bootstrap-callout-css-styles.
10</callout>
11
12===== Basic usage =====
13
14<code html5>
15<callout>
16=== Default Callout ===
17This is a default callout.
18</callout>
19</code>
20
21OR
22
23<code html5>
24<callout title="Default Callout">
25This is a default callout.
26</callout>
27</code>
28
29<callout>
30=== Default Callout ===
31This is a default callout.
32</callout>
33
34===== Contextual colors =====
35
36<callout type="primary">
37=== Primary Callout ===
38This is a primary callout.
39</callout>
40
41<callout type="success">
42=== Success Callout ===
43This is a success callout.
44</callout>
45
46<callout type="info">
47=== Info Callout ===
48This is an info callout.
49</callout>
50
51<callout type="warning">
52=== Warning Callout ===
53This is a warning callout.
54</callout>
55
56<callout type="danger">
57=== Danger Callout ===
58This is a danger callout.
59</callout>
60
61
62===== Contextual Icons =====
63
64Create a contextual colors callout by adding ''icon="true"'' attribute.
65
66<callout type="primary" icon="true">
67=== Primary Callout ===
68This is a primary callout.
69</callout>
70
71<callout type="success" icon="true">
72=== Success Callout ===
73This is a success callout.
74</callout>
75
76<callout type="info" icon="true">
77=== Info Callout ===
78This is an info callout.
79</callout>
80
81<callout type="warning" icon="true">
82=== Warning Callout ===
83This is a warning callout.
84</callout>
85
86<callout type="danger" icon="true">
87=== Danger Callout ===
88This is a danger callout.
89</callout>
90
91<code html5>
92<callout type="primary" icon="true"> [...] </callout>
93<callout type="success" icon="true"> [...] </callout>
94<callout type="info" icon="true"> [...] </callout>
95<callout type="warning" icon="true"> [...] </callout>
96<callout type="danger" icon="true"> [...] </callout>
97</code>
98
99==== Additional contextual icons ====
100
101<callout type="question" icon="true">
102=== Question Callout ===
103This is a question callout (alias of ''important'').
104</callout>
105
106<callout type="tip" icon="true">
107=== Tip Callout ===
108This is a tip callout (alias of ''warning'').
109</callout>
110
111<code html5>
112<callout type="question" icon="true"> [...] </callout>
113<callout type="tip" icon="true"> [...] </callout>
114</code>
115
116===== Custom icons =====
117
118Add custom icon via ''icon'' attribute.
119
120<callout icon="fa fa-user">
121This is default callout with ''fa fa-user'' icon
122</callout>
123
124<code html5><callout icon="fa fa-user"> [...] </callout></code>
125
126<callout type="success" icon="fa fa-plus">
127This is success callout with ''fa fa-plus'' icon
128</callout>
129
130<code html5><callout type="success" icon="fa fa-plus"> [...] </callout></code>
131
132===== Custom colors =====
133
134<callout icon="fa fa-user" color="blue" title="Custom color + icon">
135This is callout with custom color (''blue'') and icon (''fa fa-user'')
136</callout>
137
138<code html5>
139<callout icon="fa fa-user" color="blue" title="Custom color + icon"> [...] </callout>
140</code>
141
142===== Options =====
143
144<datatable info="false" paging="false" searching="true">
145^ Attribute ^ Default Value ^ Allowed Values ^ Description ^
146| ''type''  | ''default'' | ''default'' ''primary'' ''success'' ''info'' ''warning'' ''danger'' (''question'' ''tip'') | Type of callout  \\ \\ ''question'' and ''tip'' are available only for ''icon'' attribute. |
147| ''title'' |  |  | Title of callout |
148| ''icon'' |  | ''true'' or icon class from Glyphicon or FontAwesome (eg. ''fa fa-plus'') | Icon of callout |
149| ''color'' | | W3C Color name (eg. ''blue'', ''orange'', etc) or HEX (eg. ''#FF3300'', ''#777'') | Color of callout |
150</datatable>
151