Stick to

A wrapper around PopperJS for an easier integration with Vue.

Usage

To use it, put the v-bt-stick-to directive on the floating element. It expects at least a target option that is a reference on the DOM element to stick to.

Here is an example:

Live demo

Basic.vue

As you can see in the example above, the floating element refreshes if the target size changes.

WARNING

Only the size is tracked, not the position. So if your target element moves, you will have to update the floating element manually.

Position

You can control the position of the floating element via the placement option:

<div v-bt-stick-to="{placement: 'top'}">Floating element</div>

Live demo

Placement.vue

NOTE

This is just a shortcut to the PopperJS placement option.

Offset

To adjust the position of the floating element relative to its target, you can use the offset option:

<div v-bt-stick-to="{offset: [0, 10]}">Floating element</div>

• The first value offset the floating element along the target.
• The second value offset the floating element away from the target.

See PopperJS for details.

NOTE

This is just a shortcut to the PopperJS offset modifier.

PopperJS options

You can define any Popper option via the popper option:

const stickToOptions = {
    target: document.getElementById('test'),
    placement: 'right', // Will be ignored, because "placement" is also defined in "popper"
    popper: {
        placement: 'left',
        modifiers: {
            name: 'offset',
            options: {
                offset: [0, 10]
            }
        }
    }
};

<div v-bt-stick-to="stickToOptions">Floating element</div>

Options

Name	Description	Default
target	The HTML element to stick to.	Required
placement	Shorthand to Popper's placement option.	bottom
offset	Shorthand to the offset modifier.	undefined
popper	An object directly given to PopperJS.	undefined