improved documentation of tooltips

src/main/webapp/bootstrap/tooltips.xhtml

@@ -10,6 +10,65 @@
       <style>td {padding: 8px;}</style>
       <h1>Tooltips</h1>
       <p>You can add a tooltip to most BootsFaces components.</p>
+      <h3>Basic usage</h3>
+      <p>Simply add the attribute <code>tooltip="I'm a tooltip!"</code> to the attribute list of a (almost) arbitrary BootsFaces component. Optionally can you also
+      define the position of the tooltip and a delay:</p>
+      <b:well>
+      <b:panelGrid colSpans="2,10" style="height:40px">
+                    <b:button value="Hover over me" tooltip="What a nice tooltip!" tooltip-position="auto"/>
+             <script type="syntaxhighlighter" class="brush: xml; toolbar: false;gutter: false; first-line: 1">
+<![CDATA[
+      <b:button value="Hover over me" tooltip="What a nice tooltip!" tooltip-position="auto"/>
+                ]]></script>  
+                </b:panelGrid>
+                </b:well>
+                <p> At the bottom of this page you find examples for every BootsFaces component supporting tooltips.</p>
+                <br />
+      		<b:panel look="info">
+			<f:facet name="heading">
+				<b>Tooltip attributes</b>
+			</f:facet>
+			<f:facet name="footer">
+				<table class="table table-striped table-hover"
+					style="background-color: #fff">
+					<thead>
+						<tr>
+							<th style="width:130px">Attribute</th>
+							<th style="width:100px">Default value</th>
+							<th>Description</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>tooltip</td>
+							<td>none</td>
+							<td>The text of the tooltip.</td>
+						</tr>
+						<tr>
+							<td>tooltip-position</td>
+							<td>bottom</td>
+							<td>Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".</td>
+						</tr>
+						<tr>
+							<td>tooltip-delay</td>
+							<td>0 (no delay)</td>
+							<td>The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).</td>
+						</tr>
+						<tr>
+							<td>tooltip-delay-show</td>
+							<td>0 (no delay)</td>
+							<td>The tooltip is shown with a delay. Useful to define different delays for hiding and showing the tooltip. This value is the delay in milliseconds. Defaults to 0 (no delay).</td>
+						</tr>
+						<tr>
+							<td>tooltip-delay-hide</td>
+							<td>0 (no delay)</td>
+							<td>The tooltip is hidden with a delay. Useful to define different delays for hiding and showing the tooltip. This value is the delay in milliseconds. Defaults to 0 (no delay).</td>
+						</tr>
+					</tbody>
+				</table>
+			</f:facet>
+		</b:panel>
+
 
       <strong>Examples</strong>
       <h:form>