Tooltips

You can add a tooltip to most BootsFaces components.

Basic usage

Simply add the attribute tooltip="I'm a tooltip!" to the attribute list of an (almost) arbitrary BootsFaces component. Optionally can you also define the position of the tooltip and a delay:

At the bottom of this page you find examples for every BootsFaces component supporting tooltips.


Reference section

Tooltip attributes
Attribute Default value Description
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)		 body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)		 0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)		 0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)		 0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)		 (none) 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".

Examples

Component demo JSF markup
<b:button >
<b:commandButton >
<b:alert >
Important message
This tooltip appears and disappears after half a second.
<b:badge > 12
<b:buttonGroup >
<b:buttonToolbar >
<b:datePicker >
<b:dropButton >
<b:dropMenu >
(doesn't work)
<b:icon >
<b:iconAwesome >
<b:inputText >
@
<b:inputSecret >
@
<b:label > This is just a label
<b:navLinks >
<b:listLinks >
<b:modal > (not supported)
<b:navBar >
<b:navLink >
<b:selectBooleanCheckbox >
<b:selectOneMenu >
<b:slider >
12
<b:tabView > and <b:tab />

This is the first tab.

This is the second tab.
<b:thumbnail >
<b:column >
first column
second column
third column
last column
<b:container >
first column
second column
third column
last column
<b:jumbotron >
Hey, I've got a tooltip!
<b:panel >

Title of the panel

Panel content.
<b:panelGrid >
<b:row >
first column
second column
third column
last column
<b:well >

Well Header

Well content.