Skip to content

uui-popover-container: set popover attribute automatically #664

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 22, 2023
Merged

uui-popover-container: set popover attribute automatically #664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06f7624
add popover default value
JesmoDev Nov 22, 2023
73c8aef
update docs
JesmoDev Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/uui-popover-container/lib/uui-popover-container.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
16 changes: 9 additions & 7 deletions packages/uui-popover-container/lib/uui-popover-container.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div
style={{
borderLeft: '6px solid #f3d41b',
Expand Down Expand Up @@ -39,7 +41,7 @@ It is also a native popover. So everything descriped in the **[Popover API docum

```html
<uui-button popovertarget="my-popover">Open Popover</uui-button>
<uui-popover-container id="my-popover" popover>
<uui-popover-container id="my-popover">
My popover content
</uui-popover-container>
```
Expand All @@ -48,7 +50,7 @@ It is also a native popover. So everything descriped in the **[Popover API docum

```html
<uui-button popovertarget="my-popover">Open Popover</uui-button>
<uui-popover-container id="my-popover" popover placement="top-start">
<uui-popover-container id="my-popover" placement="top-start">
My popover content
</uui-popover-container>
```
Expand All @@ -57,7 +59,7 @@ It is also a native popover. So everything descriped in the **[Popover API docum

```html
<uui-button popovertarget="my-popover">Open Popover</uui-button>
<uui-popover-container id="my-popover" popover margin="10">
<uui-popover-container id="my-popover" margin="10">
My popover content
</uui-popover-container>
```
Expand All @@ -66,10 +68,10 @@ It is also a native popover. So everything descriped in the **[Popover API docum

```html
<uui-button popovertarget="my-popover">Open Popover</uui-button>
<uui-popover-container id="my-popover" popover>
<uui-popover-container id="my-popover">
My popover content
<uui-button popovertarget="my-popover-2">Open another popover</uui-button>
<uui-popover-container id="my-popover-2" popover>
<uui-popover-container id="my-popover-2">
My other popover content
</uui-popover-container>
</uui-popover-container>
Expand All @@ -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
Expand All @@ -108,7 +110,7 @@ tooltipToggle.addEventListener('mouseleave', () => tooltipPopover.hide());
Sometimes words such as
<b id="tooltip-toggle" popovertarget="tooltip-popover">petrichor</b>
needs some more explanation
<uui-popover-container id="tooltip-popover" popover>
<uui-popover-container id="tooltip-popover">
A pleasant smell that frequently accompanies the first rain after a long
period of warm, dry weather.
</uui-popover-container>
Expand Down