Pop-Over
Overview
The Style Kit includes a customised version of the Bootstrap pop-over plugin to be compatible with Style Kit specific classes. It’s functionality and data API remain exactly the same.
This plugin builds upon functionality provided by the tool-tip plugin.
Pop-over’s are not enabled globally. You will need to add the code from the activation section to use them.
Dependencies
This plugin depends upon:
See distribution for how to include these dependencies.
Activation
To enable any element with a data-bs-toggle="popover" attribute as a pop-over, include this JavaScript code after the
Style Kit’s JavaScript file.
Uses
Pop-overs can be useful for displaying summary information inside other elements, such as basic details about a feature on a map.
In most cases pop-overs should be avoided as they are hard to make accessible and do not work well on mobiles or small devices, especially where there is lots of content.
Consider if information can be shown elsewhere in the page, where there is more space and it can be interacted with normally.
Examples
<button class="bsk-btn bsk-btn-default" type="button" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover content" title="popover on the top" style="margin-top:80px;margin-left:20px;">Popover (top)</button>Extra space is added above the button to fit into the example box.