The Popover component is similar to tooltips or collapses; it is a pop-up box that appears when the user clicks on an element. The difference to tooltip is that the popover can contain much more content.
See also:
<bootstrap_popover text="" heading="" [..]>Content for the pop up</bootstrap_popover>The following attributes can be used inside the tag:
- class
- Adds this string to the class attribute of the component. If you want to add multiple classes, separate them by a space.
- color
- Sets the color for this component. See bootstrap's color documentation
(link below) for more information.
Allowed Values are
- default
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
- white
- header
- This is a mandatory field.
This will be inserted into the header area of the popover.
- id
- Sets the id of the component to this value. See to it, that it is unique.
- placement
- By default, the popover will appear on the right side of the trigger
element. With this, you can place it somewhere else:
- top
- left
- bottom
- right (default)
- size
- You can choose a size for your trigger button. Possible options are:
- xs
- sm
- md (default)
- lg
- style
- Adds this string to the style attribute of the component. If you want to add multiple css styles, separate them by a semicolon.
- text
- This is a mandatory field.
This will be used as the text for the popover button.
If you supply an image tag, it is stripped of any link tags and then be used inside the button. Best use a transparent image or match image background with button color.
- trigger
- By default, the popover is opened when you click on the trigger element,
and closes when you click on the element again. You can change his
behaviour with:
- default
- focus: the popup is closed, when you click somewhere outside the element.
- hover: the popover is displayed as long as the mouse pointer hovers over the trigger element.