diff --git a/packages/uui-popover-container/lib/uui-popover-container.element.ts b/packages/uui-popover-container/lib/uui-popover-container.element.ts index 19c6cf4d3..a96fe29b6 100644 --- a/packages/uui-popover-container/lib/uui-popover-container.element.ts +++ b/packages/uui-popover-container/lib/uui-popover-container.element.ts @@ -74,6 +74,10 @@ export class UUIPopoverContainerElement extends LitElement { //TODO: Remove this polyfill when firefox supports the new popover API !HTMLElement.prototype.hasOwnProperty('popover') && polyfill.bind(this)(); + if (!this.hasAttribute('popover')) { + this.setAttribute('popover', ''); + } + super.connectedCallback(); this.addEventListener('focusout', this.#onFocusOut); diff --git a/packages/uui-popover-container/lib/uui-popover-container.mdx b/packages/uui-popover-container/lib/uui-popover-container.mdx index c5bb9dece..94bdb8612 100644 --- a/packages/uui-popover-container/lib/uui-popover-container.mdx +++ b/packages/uui-popover-container/lib/uui-popover-container.mdx @@ -8,6 +8,8 @@ import * as stories from './uui-popover-container.story'; This component is a container for popovers. It is used to position the popover relative to the target element. It is also a native popover. So everything descriped in the **[Popover API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)** applies. +**Note**: The `popover` attribute that is required by the Popover API is automatically added to the uui-popover-container if it is not already present. So this attribute can be omitted, unless you want to change the default behavior. More information about this can be found in the **[Manual popover](#manual-popover)** section. +
Open Popover - + My popover content ``` @@ -48,7 +50,7 @@ It is also a native popover. So everything descriped in the **[Popover API docum ```html Open Popover - + My popover content ``` @@ -57,7 +59,7 @@ It is also a native popover. So everything descriped in the **[Popover API docum ```html Open Popover - + My popover content ``` @@ -66,10 +68,10 @@ It is also a native popover. So everything descriped in the **[Popover API docum ```html Open Popover - + My popover content Open another popover - + My other popover content @@ -93,7 +95,7 @@ As a result, you will need to manually close the popover either by clicking the ## Example: Tooltip -A tooltip is a small pop-up box that appears when the user hovers over an item, providing additional information or context about that item. +A tooltip is a small pop-up box that appears when the user hovers over an item, providing additional information or context about that item. Note: The popover-container always needs a an element with the `popovertarget` attribute, even when it's not a button. This element is used as the anchor to position the popover. ```js @@ -108,7 +110,7 @@ tooltipToggle.addEventListener('mouseleave', () => tooltipPopover.hide()); Sometimes words such as petrichor needs some more explanation - + A pleasant smell that frequently accompanies the first rain after a long period of warm, dry weather.