Blueprint UI uses native HTML Popovers API. This enables popovers to use be used without JavaScript. There are several provided popover types with different UX and Accessibility characteristics.
<bp-button popovertarget="popover">show</bp-button>
<bp-tooltip id="popover">hello there</bp-tooltip>- Tooltip: In context or just in time static non-interactive information.
- Toggletip: In context information or actions, toggletips unlike tooltips can remain open for interactive elements.
- Toast: Async information updates or notifications without interuption to the user.
- Dropdown: Generic popover anchored to a interactive element. Can contain interactive or static content.
- Dialog: Content that interupts the users current view overlaying page content. Can contain both static or interactive content.
- Drawer: Similar to dialog overlaying current page content, but typically used for navigation based or interactive UI elements.
Shows different popover type variations.
code
<div bp-layout="inline gap:sm center" style="height: calc(100vh - 48px)">
<bp-button interestfor="tooltip">tooltip</bp-button>
<bp-button popovertarget="toggletip">toggletip</bp-button>
<bp-button popovertarget="toast">toast</bp-button>
<bp-button popovertarget="dropdown">dropdown</bp-button>
<bp-button popovertarget="dialog">dialog</bp-button>
<bp-button popovertarget="drawer">drawer</bp-button>
</div>
<bp-tooltip id="tooltip">tooltip</bp-tooltip>
<bp-toggletip id="toggletip">toggletip</bp-toggletip>
<bp-toast id="toast" position="bottom" closable>toast</bp-toast>
<bp-dropdown id="dropdown" closable>dropdown</bp-dropdown>
<bp-dialog id="dialog" modal closable>dialog</bp-dialog>
<bp-drawer id="drawer" closable>drawer</bp-drawer>
<script type="module">
import '@blueprintui/components/include/button.js';
import '@blueprintui/components/include/toggletip.js';
import '@blueprintui/components/include/tooltip.js';
import '@blueprintui/components/include/toast.js';
import '@blueprintui/components/include/dropdown.js';
import '@blueprintui/components/include/dialog.js';
import '@blueprintui/components/include/drawer.js';
</script>Popover API
The Popover API allows you to control the popover element declaratively without JavaScript.
code
<bp-button popovertarget="toggletip-popover">toggletip</bp-button>
<bp-toggletip id="toggletip-popover">toggletip</bp-toggletip>
<script type="module">
import '@blueprintui/components/include/toggletip.js';
import '@blueprintui/components/include/button.js';
</script>Invoker Commands API
The Invoker Command API is similar to the Popover API but with a more generalized approach for any HTML Element.
code
<bp-button commandfor="toggletip-popover" command="toggle-popover">toggletip</bp-button>
<bp-toggletip id="toggletip-popover">toggletip</bp-toggletip>
<script type="module">
import '@blueprintui/components/include/toggletip.js';
import '@blueprintui/components/include/button.js';
</script>Interest Invokers API
The Interest Invokers API enables elements like popovers to be triggered when a user "shows interest" or hide when a user loses interest. Interest can be trigger by different user input such as hover, focus or long press events.
code
<bp-button interestfor="tooltip-interest">tooltip</bp-button>
<bp-tooltip id="tooltip-interest">tooltip</bp-tooltip>
<script type="module">
import '@blueprintui/components/include/tooltip.js';
import '@blueprintui/components/include/button.js';
</script>