Tooltips
Static Tooltip
Four options are available: top, right, bottom, and left aligned.
Color
Five information situations are available: use the class primary,
success, warning, info,
danger .
Triggers Click
You can select the action that triggers the tooltip either by
adding the data-trigger="click" attribute
or by setting the trigger parameter via Javascript.
Popover official website
Static Popover
Four options are available: top, right, bottom, and left aligned.
Popover Bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Popover Top
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Popover Right
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Popover Left
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Color
Five information situations are available: use the class primary,
success, warning, info,
danger .
Primary
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Success
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Info
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Warning
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Danger
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Triggers Click
You can select the action that triggers the popover either by
adding the data-trigger="click / hover" attribute or by setting the trigger parameter via Javascript.
WebUI Popover official website
Auto Detect Placement
Auto detect the placement, always poped in page, can be contrained by horizontal or vertical
Pop With Animation
Set animation by data-attribute or code
Delayed show/hide
Control delay show/hide by data-attribute or code
Advanced examples
Table in popover, larget content, async mode, iframe mode