Popover

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the popover
var el = document.querySelector("#popover");
var popover = Components.Popover({
    el: el,
    isDismissible: true,
    btnProps: {
        text: "Popover Demo"
    },
    options: {
        container: "body",
        content: "This is the popover content.",
        title: "My Popover",
        trigger: "hover"
    }
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the popover
let el = document.querySelector("#popover");
let popover = Components.Popover({
    el: el,
    isDismissible: true,
    btnProps: {
        text: "Popover Demo"
    },
    options: {
        container: "body",
        content: "This is the popover content.",
        title: "My Popover",
        trigger: "hover"
    }
});

Web Component

// Return the popover properties return { btnProps: { text: "Popover Demo" }, options: { container: "body", content: "This is the popover content.", title: "My Popover", trigger: "hover" } };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-popover is-dismissible="true">
    // Return the popover properties
    return {
        btnProps: {
            text: "Popover Demo"
        },
        options: {
            container: "body",
            content: "This is the popover content.",
            title: "My Popover",
            trigger: "hover"
        }
    };
</bs-popover>

References

Popover(props:IPopoverProps):IPopover

PopoverTypes

Name Value
Auto 1
Bottom 2
Left 3
Right 4
Top 5

IPopover

Name Returns Description
dispose () => void Destroy’s an element’s popover.
el Element The jquery element.
hide () => void Hides an element’s popover.
toggle () => void Toggles an element’s popover.
toggleEnabled () => void Toggles the ability for an element’s popover to be shown or hidden.
show () => void Shows an element’s popover.
update () => void Updates the position of an element’s popover.

IPopoverOptions

Name Type Description  
animation boolean Apply a CSS fade transition to the popover.  
boundary string | Element Overflow constraint boundary of the popover.  
container string | Element | Function Appends the popover to a specific element.  
content string | Element The popover content.  
delay _number object_ Delay showing and hiding the popover (ms) - does not apply to manual trigger type.
fallbackPlacement _string Array<string>_ Allow to specify which position Popper will use on fallback.
html boolean Insert HTML into the popover. Set to true, if you are returning element.  
offset _number string_ Offset of the popover relative to its target.
placement string | Function How to position the popover (auto, top, bottom, left, right). When auto is specified, it will dynamically reorient the popover.  
selector string If a selector is provided, popover objects will be delegated to the specified targets.  
template string Base HTML to use when creating the popover.  
title string | Element | Function Default title value if title attribute isn’t present.  
trigger string How popover is triggered (click, hover, focus, manual). You may pass multiple triggers; separate them with a space. Manual cannot be combined with any other trigger.  

IPopoverProps

Name Type Description
btnProps IButtonProps The button properties.
className string The class name to apply to popover.
el HTMLElement The element to render the popover to.
isDismissible boolean Closes the popover when clicking anywhere on the page.
options IPopoverOptions The popover options.
type number The popover type. Reference the PopoverTypes enumerator