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
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
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 | determine user closable state |
open | boolean | default popover to open on intialization |
position | Position | determine the position relative to the anchor |
anchor | HTMLElement | string | anchor element popover will positiion relative to |
trigger | HTMLElement | string | the triggering element that opens the popover |
i18n | | set default aria/i18n strings |
Attributes
| Name | Types | Description |
|---|
closable | boolean | determine user closable state |
open | boolean | default popover to open on intialization |
position | Position | determine the position relative to the anchor |
anchor | HTMLElement | string | anchor element popover will positiion relative to |
trigger | HTMLElement | string | the triggering element that opens the popover |
i18n | | set default aria/i18n strings |
CSS Properties
| Name | Types | Description |
|---|
--padding | | |
--filter | | |
--background | | |
--color | | |
--width | | |
--height | | |
--min-width | | |
--min-height | | |
--font-size | | |
Slots
| Name | Types | Description |
|---|
default | | content |