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 |
open | boolean | Controls whether the toggletip is visible on initialization |
position | Position | Specifies the position of the toggletip relative to its anchor element |
anchor | HTMLElement | string | Defines the anchor element or selector that the toggletip will position relative to |
i18n | | Provides internationalization strings for translated text content |
Attributes
| Name | Types | Description |
|---|
closable | boolean | Determines whether a close button is displayed for dismissing the toggletip |
open | boolean | Controls whether the toggletip is visible on initialization |
position | Position | Specifies the position of the toggletip relative to its anchor element |
anchor | HTMLElement | string | Defines the anchor element or selector that the toggletip will position relative to |
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 |