Popover Hds

<sl-popover-hds> | SlPopoverHds
Since 2.0 experimental

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.
example An example slot.

Learn more about using slots.

Properties

Name Description Reflects 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 ''
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’ string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event 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.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-example>