Product Selector

Fusion 5.9
    Fusion 5.9

    widget:popover

    Description

    The popover widget allows the popover content to be displayed in a popup when the popover trigger is clicked.

    Usage

    as element:

    <widget:popover
       [direction="{string}"]
       [mode="{string}"]
       [close-on-click="{string}"]
       [close-on-mouseleave="{string}"]
       [on-close="{function}"]
       [hover-timeout="{number}"]>
</widget:popover>

    Directive info

    • This directive creates new scope.

    Parameters

    Param Type Details

    direction

    (optional)

    string

    Where the popover should appear (top, left, right, bottom, bottom-left, bottom-center-left, bottom-center-right). Default: bottom

    mode

    (optional)

    string

    How the popover should open (hover or click). Default: click

    close-on-click

    (optional)

    string

    Close the popover when the popover is clicked on. Default: false

    close-on-mouseleave

    (optional)

    string

    Close the popover when the mouse leaves the element.

    on-close

    (optional)

    function

    Function to call when the popover is closed.

    hover-timeout

    (optional)

    number

    A number to determining the number of milliseconds the popover should be displayed for after the user leaves the popover-trigger. (Only applicable to hover mode.) Default: 1000

    Example

    Source

    <layout:box>
    <widget:popover direction="bottom" styling="popover-medium">
        <popover-trigger>
            <button styling="button">Bottom</button>
        </popover-trigger>
        <popover-content>
            <h3 id="example_title">Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum distinctio dolores enim esse fuga incidunt laboriosam maxime nam odio pariatur provident, quae quam quidem quod saepe voluptas. Maiores, obcaecati.</p>
        </popover-content>
    </widget:popover>
</layout:box>

<layout:box>
    <widget:popover direction="top" styling="popover-small">
        <popover-trigger><button styling="button">Top</button></popover-trigger>
        <popover-content>
            <h3 id="example_title">Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum distinctio dolores enim esse fuga incidunt laboriosam maxime nam odio pariatur provident, quae quam quidem quod saepe voluptas. Maiores, obcaecati.</p>
        </popover-content>
    </widget:popover>
</layout:box>
</div>

<layout:box>
    <widget:popover direction="left">
        <popover-trigger><button styling="button">Left</button></popover-trigger>
        <popover-content>
            <h3 id="example_title">Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum distinctio dolores enim esse fuga incidunt laboriosam maxime nam odio pariatur provident, quae quam quidem quod saepe voluptas. Maiores, obcaecati.</p>
        </popover-content>
    </widget:popover>
</layout:box>

<layout:box>
    <widget:popover direction="right" styling="popover-large">
        <popover-trigger><button styling="button">Right</button></popover-trigger>
        <popover-content>
            <h3 id="example_title">Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum distinctio dolores enim esse fuga incidunt laboriosam maxime nam odio pariatur provident, quae quam quidem quod saepe voluptas. Maiores, obcaecati.</p>
        </popover-content>
    </widget:popover>
</layout:box>

<layout:box>
    <widget:popover mode="hover">
        <popover-trigger><button styling="button">Hover</button></popover-trigger>
        <popover-content>
            <h3 id="example_hover">Hover</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam debitis deserunt eum minus molestiae mollitia perspiciatis possimus provident quae. Architecto corporis dicta ea harum odio saepe suscipit, totam ut!</p>
        </popover-content>
    </widget:popover>
</layout:box>

    Result

    Result