The toggletip component is used to provide explanations, definitions, or supplementary interactions for a given element. It should be used to provide additional information or actions that are not essential to the user's understanding of the content, but that may be helpful or informative.
Example
Provides accessible toggleable contextual information.
Wow this is a toggletip message!
DismissLearn Morecode
<div bp-layout="block center" style="height: 350px">
<bp-button-icon popovertarget="toggletip-example" id="toggletip-btn" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
<bp-toggletip id="toggletip-example" anchor="toggletip-btn" position="top">
<p bp-text="content">Wow this is a toggletip message!</p>
<bp-button slot="footer" action="inline">Dismiss</bp-button>
<bp-button slot="footer" action="inline">Learn More</bp-button>
</bp-toggletip>
</div>
<script type="module">
import '@blueprintui/components/include/toggletip.js';
import '@blueprintui/components/include/button-icon.js';
import '@blueprintui/icons/shapes/info.js';
</script>
Position
Shows toggletip positioning options.
toggletip righttoggletip bottomtoggletip lefttoggletip top
code
<bp-toggletip open id="toggletip-1" anchor="toggletip-action-1" position="right">toggletip right</bp-toggletip>
<bp-toggletip open id="toggletip-2" anchor="toggletip-action-2" position="bottom">toggletip bottom</bp-toggletip>
<bp-toggletip open id="toggletip-3" anchor="toggletip-action-3" position="left">toggletip left</bp-toggletip>
<bp-toggletip open id="toggletip-4" anchor="toggletip-action-4" position="top">toggletip top</bp-toggletip>
<div bp-layout="grid gap:md cols:6 block:stretch center" style="padding-top: 100px; max-height: 95vh; min-height: 340px">
<bp-button-icon popovertarget="toggletip-1" id="toggletip-action-1" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
<bp-button-icon popovertarget="toggletip-3" id="toggletip-action-3" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
<bp-button-icon popovertarget="toggletip-2" id="toggletip-action-2" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
<bp-button-icon popovertarget="toggletip-4" id="toggletip-action-4" action="flat" shape="info" aria-label="open toggletip"></bp-button-icon>
</div>
<script type="module">
import '@blueprintui/components/include/toggletip.js';
import '@blueprintui/components/include/button-icon.js';
import '@blueprintui/icons/shapes/info.js';
</script>
Install
NPM
import '@blueprintui/components/include/toggletip.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/toggletip.js/+esm';
</script>
Accessibility
- The component should be fully navigable using only the keyboard, allowing users to easily move between different toggletip.
- The component should also provide a clear visual indication of focus for keyboard only users.
bp-toggletip
Events
| Name | Types | Description |
|---|
open | | dispatched when the toggletip is opened |
close | | dispatched when the toggletip is closed |
Properties
| Name | Types | Description |
|---|
closable | boolean | Determines whether a close button is displayed for dismissing the toggletip |
position | Position | Specifies the position of the toggletip relative to its anchor element |
i18n | | Provides internationalization strings for translated text content |
popoverConfig | PopoverConfig | Configuration options for popover behavior - override this getter in subclasses |
open | boolean | Controls whether the popover is visible on initialization |
anchor | HTMLElement | string | Defines the anchor element or selector that the popover will position relative to |
Attributes
| Name | Types | Description |
|---|
closable | boolean | Determines whether a close button is displayed for dismissing the toggletip |
position | Position | Specifies the position of the toggletip relative to its anchor element |
i18n | | Provides internationalization strings for translated text content |
CSS Properties
| Name | Types | Description |
|---|
--padding | | |
--filter | | |
--background | | |
--color | | |
--width | | |
--height | | |
--min-width | | |
--min-height | | |
--font-size | | |
Slots
| Name | Types | Description |
|---|
default | | content |