# Introduction

The hhl-pop will give you a popUp as a dropdown or dropup box.
If there not is place enough it will automatically change the position.

# Trigger.

The default trigger is toggle meaning that it toggle the popup when you click the component.
The other options are.
trigger="none" Meaning no action when click the component.
trigger="click" Meaning show the popUp when you click the component but will not close when you click the component
trigger="hover" Meaning show the popUp when you hover the component but will not close when you click the component

# v-model.

You can also use the v-model to control the open/close of the popup.

# Delay on hover.

By adding the property delay-on-mouse-over it will adjust delay when you hover the component (referance).
The default is 100.

# Delay on end hover.

By adding the property delay-on-mouse-out it will adjust delay when you end hover the component (referance) and popup.
The default is 300.

# Prevent closing.

By adding the attribute no-outside-click you will prevent the popup to close when you click outside the popup.
By adding the attribute no-reference-click you will prevent the popup to close when you click on the reference element.

# PopUp placement.

By adding the property top the default dropdown will change to dropup.
The popUp will by default be placed at the start of the component.
By adding the property right it will be placed to the end of the component.

# Adjust to component (reference).

By adding the property full-width the width of the popup will as minium be the same as the component (referance).

# Adjust to the inner of the component (referance).

By adding the property inner it will adjust the position to the inner boundaries.

# Max width.

By adding the property max-width it will set the popup maxWidth to the value.

# Min width.

By adding the property min-width it will set the popup minWidth to the value.

# Max height.

By adding the property max-height it will set the popup maxWidth to the value.

# Min height.

By adding the property min-height it will set the popup minWidth to the value.

# Viewport padding.

By adding the property viewport-padding it will set the margin for the popup.

# Offset when down.

By adding the property offset-when-down it will adjust the top position with the value. It can be positive or negative.

# Offset when up.

By adding the property offset-when-up it will adjust the top position with the value. It can be positive or negative.

# Offset left.

By adding the property offset-left it will adjust the left position with the value. It can be positive or negative.