Popover Hds

<sl-popover-hds> | SlPopoverHds

Since 1.0

stable

Popover component to display title, content, href and custom border colour.

Examples

Basic Example

<sl-popover-hds></sl-popover-hds>
<script>
  const popover = document.querySelector('sl-popover-hds');
  setTimeout(() => popover.show(), 100)
  document.addEventListener('scroll', () => popover.hide())
</script>

[component-metadata:sl-popover-hds]

Slots

Name	Description
(default)	The default slot.

Learn more about using slots.

Properties

Name	Description	Type	Default
`popoverTitle` `popover-title`	The title of the popover.	`string`	`''`
`label`	The label of the popover.	`string`	`''`
`value`	The value of the popover.	`string`	`''`
`html`	The html content of the popover.	-	html``
`borderColour` `border-colour`	The border colour of the popover.	`string`	`'#ffffff'`
`href`	The href of the popover.	`string`	`''`
`targetBlank` `target-blank`	The href target ‘_blank’ or ‘_self’ of the popover.	`boolean`	`false`
`position`	The position of the popover. ‘top’ \|\| ‘bottom’ \|\| ‘left’ \|\| ‘right’	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
`popoverTheme` `popover-theme`	Popover theme	`'light' \| 'dark'`	`'light'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	Description	Event Detail
`sl-hide`	Emitted when the popover is hidden.	-
`sl-show`	Emitted when the popover is shown.	-
`popover-click`	Emitted when the popover link is clicked.	-

Learn more about events.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>