The dk-callout web component creates a floating box on the page with a triangle pointing towards a target element. The callout is default positioned to the right of the target and has many other options for positioning that can be specified in the component. The element can be selected either with an ID or classname in the target attribute.
Some properties below are used in the callout when the callout is part of a tour. For more information view the tour component page.
Callouts are not limited in what elements can be displayed inside them but they are limited to a max-width of 350 pixels. <h3> tags are preferred for callout titles and <p> tags for the content to keep things simple and consistent. For complicated callout layout questions email dl_Front_End_Developers@digikey.com
Note: callouts will not automatically move if displayed off the page.
Code Example:
<span id="calloutTarget">The callout target.</div>
<dk-callout
target="#calloutTarget"
open="true"
next-text="Ok"
placement="right"
>
<h3>Callout Headline</h3>
<p>Text for inside the callout.</p>
</dk-callout>
Code Preview:
Properties
Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
backText | back-text | Set what text should be in the button that is used for the back action | string | null |
dismissText | dismiss-text | Set what text should be in the button that is used for the dismiss action | string | null |
isOpen | open | This prop reflects the open/closed state of the callout. You can set this property to control if the callout is opened or closed. | boolean | false |
nextText | next-text | Set what text should be in the button that is used for the next action | string | null |
placement | placement | The side of the target that the callout should try to attach to | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "right" |
target | target | Target element for the callout to attach to. Use a CSS selector. | string | |
tourId | tour-id | The id of a tour element that the callout should start when the correct button is pressed | string | null |
Events
| Event | Description | Type |
|---|---|---|
dkStepClose | Event fired when the callout opens | any |
dkStepOpen | Event fired when the callout opens | any |