@fluid-topics/ft-popover v1.2.27

A popover component.

Install

npm install @fluid-topics/ftds-popover
yarn add @fluid-topics/ftds-popover

Usage

import { html } from "lit"
import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
import "@fluid-topics/ft-link"
import "@fluid-topics/ft-popover"

@customElement("my-element")
class MyElement extends FtLitElement {

    render() {
        return html`
            <ftds-popover
                    heading="Popover heading"
                    ?opened="false"
                    closeButtonLabel="close info"
                    openButtonLabel="more info"
                    openButtonTooltipPosition="bottom"
                    openButtonFamily="brand"
                    openButtonSize="medium"
                    @opened-changed=${ (e: CustomEvent<{
                        opened: boolean
                    }>) => console.log("opened changed ", e.detail) }
                >
                Exemple popover content
                <ftds-link slot="link" href="" variant="body-2-medium" family="brand" underlined>Example popover link</ftds-link>
            </ftds-popover>
        `
    }
}